1. 程式人生 > >react16.3(4)的新特性

react16.3(4)的新特性

func 回調 hoc cal 組件 兼容 三方 java app

一、16.3 >> 16.4

1、修改了getDerivedStateFromProps的觸發機制
父組件或自身的update都會觸發getDerivedStateFromProps(nextProps, prevState)來返回對象來修改自身的state(16.3只有父組件會觸發,為了實現17以後的異步渲染)

getDerivedStateFromProps(np, ps){
  return {
    next: np.next
  }  
  // 相當於
  setState({
     next: np.next  
  })    
}

  

2、ComponentDidUpdate新增了第三個參數snapshot來保存getSnapshotBeforeUpdate返回的對象(16.3新增)

 componentDidUpdate (pp, ps, snapshot) {
      // snapshot === {
      //   name: ‘haha‘
      // }
 }

3、全新的ref的創建方式,放棄了以前使用回調函數或者字符串的形式(16.3)

1)、createRef

const Child=React.forwardRef((props,ref)=>(
  <input ref={ref} />
))

class Father extends React.Component{
  constructor(props){
    super(props);
    this.myRef=React.createRef();
  }
  componentDidMount(){
    console.log(this.myRef.current);
  }
  render(){
    return <Child ref={this.myRef}/>
  }
}

2)、高階組件中傳遞ref

class Child extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return < input / >
    }
}

function logProps(Component) {
    class LogProps extends React.Component {
        componentDidUpdate(prevProps) {
            console.log(‘old props:‘, prevProps);
            console.log(‘new props:‘, this.props);
        }

        render() {
            const { forwardedRef, ...rest } = this.props;
            return < Component ref = { forwardedRef } { ...rest }/>;
    }
  }
  return React.forwardRef((props, ref) => {
    return <LogProps {...props} forwardedRef={ref} / > ;
  });
}

const LogProps = logProps(Child)

class Father extends Component {  
    constructor(props) {    
        super(props)    
        this.myRef = React.createRef()  
    }  
    render() {    
        return ( <LogProps ref={this.myRef} /> )
 }
}    

  

react 16.3之前HOC的中ref的傳遞方式

class Child extends Component {
  state = {
    call: ‘child‘
  }
  render () {
    return (
      <div>Child</div>
    )
  }
}

const setInstance = function (Element) {
  return class extends Component {
    render () {
      const props = { ...this.props }
      const { getInstance } = props
      if (typeof getInstance === ‘function‘) {
        props.ref = getInstance
      }
      return (<Element {...props} />)
    }
  }
}

const Wrapper = function (Com) {
  return class extends Component {
    render () {
      let props = { ...this.props }
      return (<Com {...props} />)
    }
  }
}

const HOC = Wrapper(setInstance(Child))

class Parent extends Component {
  state = {
    call: ‘parent‘
  }
  componentDidMount () {
    console.log(this.child)
  }
  render () {
    return (
      <div>
        Parent
        <HOC getInstance={(child) => this.child = child}/>
      </div>
    )
  }
}
// 實質上就是this的傳遞

  

三、增加了對pointEvent的支持,但自身並不做兼容,需使用第三方插件

即整合了click,touch和觸控筆點擊的事件使用方法和onClick一樣

react16.3(4)的新特性