react16.3(4)的新特性
阿新 • • 發佈:2018-07-13
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)的新特性