二、react一些用法

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
}
``

你可能感兴趣的:(二、react一些用法)