-
this.state只能赋值在构造函数中constructor。 - 组件可以选择把它的
state作为props向下传递到它的子组件中。即自上而下的数据流，任何的state总是所属于特定的组件，而且从该state派生的任何数据或 UI 只能影响树中“低于”它们的组件。 - JSX中需要传入一个函数作为时间处理函数。
<button onClick={activateLasers}>
Activate Lasers
</button>
- 如果注册捕获阶段的事件处理函数，则应为事件名后添加
Capture。例如，处理捕获阶段的点击事件请使用onClickCapture，而不是onClick。 - 合成事件
event
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
这里的e就是合成事件。
- 对于使用
class创建的组件，通常把事件处理函数作为组件的方法。 - 在JS中，
class中的方法默认不会绑定this，所以对于callback，需要绑定this强制使其指向当前实例，确保在这个处理函数中使用this时可以时刻指向这一组件的实例。如果不绑定会怎么样呢，会引起this指向丢失，为undefined。有三种方式绑定：
- 在构造中使用
bind绑定
constructor(props) {
super(props);
this.state = {isToggleOn: true};
this.handleClick = this.handleClick.bind(this);
}
- 在声明方法的时候使用箭头函数
handleClick = () => {
this.setState(prevState => ({
isToggleOn: !prevState.isToggleOn
}));
}
- 调用的时候使用箭头函数
render() {
return (
<button onClick={ () => { this.handleClick } }>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
- 阻止组件被渲染，
render直接返回null。 - key：key 帮助 React 识别哪些元素改变了，比如被添加或删除。至于它的重要性，回头再阅读，码上。深度解析为什么key是必须的
