msforest
commented
7 years ago react 知识碎片
EVENT
react事件与dom事件相似，但又有一些不同点
- react事件名使用驼峰命名法，而不是小写
- jsx把调用事件作为函数，而不是字符串
<button onclick="activateLasers()"> Activate Lasers </button>
- react无法使用`return false`来阻止默认行为，必须在函数里明确调用`preventDefault()`
react调用事件需要绑定`this`，否则`this`等于`undefined`
有两种绑定方式：
1，在构造方法里绑定
```javascript
class InputForm extends React.Component{
constructor(props){
super(props);
this.state = {value: ''};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(e){
console.log(e.target.value)
this.setState({value: e.target.value});
}
handleSubmit(e){
console.log(e);
e.preventDefault();
}
render(){
return (
<form onSubmit={this.handleSubmit}>
name: <input type="text" value={this.state.value} onChange={this.handleChange} /><br/>
<input type="submit" value="submit" />
</form>
);
}
}2，在定义的地方使用函数调用
class Toggle extends React.Component{
constructor(props){
super(props);
this.state = {isToggleOn: true};
}
handlerClick(){
console.log('test')
this.setState(pre=>({
isToggleOn: !pre.isToggleOn
}));
}
render(){
return (
<button onClick={(e)=>this.handlerClick(e)}>{this.state.isToggleOn?'on':'off'}</button>
);
}
}当需要向函数传递参数时，尽可能使用第二种形式（PS：参数e不需要时可不传）
REF
- 如果ref是作为html的attribute，则ref回掉函数接收一个DOM元素作为参数；组件挂载的时候会将DOM元素作为参数，卸载的时候会将null作为参数
- 当ref是作为组件的attribute时，且组件是通过class声明，则ref回掉函数将接收一个组件实例作为参数
- 当ref是作为组件的attribute时，且组件是通过function声明，则ref引用不存在，因为此时没有实例；但是你可以在function声明的组件内部使用ref作为attribute，规则同1、2
props & state
props对象是作为component的attribute，根据props可以判断component的属性, props是只读的，用于从父组件向子组件传递数据；state是作为component内部的一个property，根据state可以判断内部有哪些变化的值；
<App name="myName" />
class App extends React.Component{
constructor(props){
super(props); //props contain name
this.state = {from: 'zj'};
}
render(){}
}shouldComponentUpdate(SCU)
判断组件是否需要重新渲染
shouldComponentUpdate(nextProps, nextState) {
if (this.props.color !== nextProps.color) {
return true; //更新
}
if (this.state.count !== nextState.count) {
return true;
}
return false; //不更新
}
//和下面代码效果相同
class xxx extends React.PureComponent{
}React.PureComponent表示shallow comparison浅显的比较
1. React库加载
2. react 知识碎片
3. react Lifecycle
4. react router
React库加载
学习资料： facebook's React 阮一峰React技术栈