讲讲我学习 React 遇到的那些坑 vol.1

也欢迎来看我的 Vue.js 系列:

总体来说

和 Vue 整体差别蛮大的。

  • 数据单向（虽然是可以做成双向，但我觉得这应该不是React设计初衷）
  • HTML和方法边界模糊
  • 不需要在一种特定的模板下去写逻辑 (比如说vue取值需要放在data里面)

数据更新

refs: https://legacy.reactjs.org/docs/state-and-lifecycle.html
tips: 好像已经过时了, 在后续的文章中会介绍更好的写法

想要数据在页面上可以更新，还是需要依靠state的。

class Clock extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            // step1. 定义变量，date 变量
            date: new Date()
        };
    }

    // step2. 更新值的方法
    tick() {
        this.setState({
            date: new Date()
        });
    }
    
    // step3. render 到页面上
    render() {
        return (
            <div>
                <h1>Hello, world!</h1>
                <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
            </div>
        );
    }
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Clock />);

类双向绑定

可以通过 state 来更新页面渲染的内容，那么组件上输入的内容要怎么更新数据呢。

Responding Event

e.g: 

// onClick
function Button({ onSmash, children }) {
  return (
    <button onClick={onSmash}>
      {children}
    </button>
  );
}

// onSmash
<div>
    <Button onSmash={() => alert('Playing!')}>
        Play Movie
    </Button>
</div>

// onSubmit
<form onSubmit={e => {
    e.preventDefault();
    alert('Submitting!');
}}>

// onChange
<Input type='text' placeholder='Original Body' onChange={this.handleBodyChange.bind(this)} value={this.state.model.body} />
handleBodyChange(event: any) {
    // 获取输入框值
    let body = event.target.value
    this.setState({
    body: body
    })
}

Refs