美文网首页
二、react一些用法

二、react一些用法

作者: 懒羊羊3号 | 来源:发表于2018-12-18 17:04 被阅读0次

    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一些用法

          本文链接:https://www.haomeiwen.com/subject/oovyqqtx.html