1.props
const element = <Welcome name="Sara" />
如果用户自定义了一个组件Welcome,可以传递他的jsx属性,我们把类似于name的属性叫做props.
2.state
不能直接修改state的值
同时更新几个值,state更新可能是异步的,一般这样写:
// Wrong
this.setState({
counter: this.state.counter + this.props.increment,
});
// Correct
this.setState((prevState, props) => ({
counter: prevState.counter + props.increment
}));
3.自定义组件
通常自定义组件以大写开头.
如果一个组件被多次调用,可以将它抽象为一个函数,返回该组件
4.事件
阻止默认事件:e.preventDefault()
点击事件时需要bind
If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
if you refer to a method without () after it, such as onClick={this.handleClick}, you should bind that method.
如果不习惯该用法,可以使用箭头函数
<button onClick={(e) => this.handleClick(e)}>Click me
</button>
上面这种语法的问题是每次LoggingButton呈现时都会创建一个不同的回调。在大多数情况下,这是很好的。但是,如果将此回调传递给较低的组件,则这些组件可能会执行额外的重呈现。我们通常建议在构造函数中绑定或使用类字段语法,以避免这种性能问题。
点击事件传递参数
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>