1、组件变量 state = { },this.setState,调用this.state
2、link传参数
https://github.com/beat-the-buzzer/react-router-test
3、生命周期
UNSAFE_componentWillReceiveProps(nextProps) {
this.requestNodeListLatest(nextProps.location.query.text);
}
componentDidUpdate(prevProps) {
if (prevProps.location !== this.props.location) {
this.requestNodeListLatest(this.props.location.query.text);
}
}
static getDerivedStateFromProps(props, state){
console.log(props);
if(props.location!== state.location) {
console.log(state);
return {
location: props.location,
}
}
return null;
}
image.png
4、PureComponent
只要把继承类从 Component 换成 PureComponent 即可,可以减少不必要的 render 操作的次数,从而提高性能,而且可以少写 shouldComponentUpdate 函数,节省了点代码。
5、键盘事件
onInputKeyDown={this.handleEnterInputSearch}
handleEnterInputSearch = (e) => {
if(e.keyCode === 13){
this.props.history.push({
pathname: '/flow-node/list',
query: {
text:this.state.input
},
});
}
}
6、e.persist();
如果你想异步访问事件属性,你应该在事件上调用 event.persist() ,这会从池中移除合成事件并允许对事件的引用被用会保留.
7、trim()
去除空格
8、写法区别
emitEmpty = () => {
console.log(this); //绑定的dom
};
emitEmpty() {
console.log(this); //绑定的dom,undifined
}
``
网友评论