We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
注: 本文说的 React16 是指当前最新版本 16.5.2 ,而不是指 16.0.0。很多特性都是在 16.0.0 之后陆陆续续加的,而不是在一次性在 16.0 加入的。特别是 getDerivedStateFromProps 在 16.4.0 之后还改过一次。
getDerivedStateFromProps
实例: https://stackblitz.com/edit/react16-ref
之前已经有 string ref(将被废弃) 和 callback ref,React16 新加入 createRef:
string ref
callback ref
createRef
// init this.btnRef = React.createRef(); // access this.btnRef.current
实例: https://stackblitz.com/edit/react16-new-context
// init const Context = React.createContext(); // use <Context.Provider value={/*...*/}> <Context.Consumer> {value => { //... }} </Context.Consumer>
新加入 componentDidCatch / getDerivedStateFromProps / getSnapshotBeforeUpdate 三种生命周期,并且将 componentWillMount / componentWillReceiveProps / componentWillUpdate 置为 UNSAFE。
componentDidCatch
getSnapshotBeforeUpdate
componentWillMount
componentWillReceiveProps
componentWillUpdate
UNSAFE
实例: https://stackblitz.com/edit/react-componentdidcatch
实例: https://stackblitz.com/edit/react-getderivedstatefromprops
在组件实例化后和接受新 props 后被调用,需要 return 一个对象来更新状态或返回null表示新的props不需要任何state更新。
在react render()后的输出被渲染到DOM之前被调用。
实例: https://stackblitz.com/edit/react16-fragments
一直以来,React render 只能 return 组件,不能是 string、 array、 boolean等值,这其实限制了开发者的能力。React 16 给我们带来了这些新功能:
// string render() { return 'this is string' } // number render() { return 123 } // boolean render() { return true && <div>abc</div> }
另外,render return 要求一定要有一个根组件,而开发者就不得不在外层套一个 <div>,现在 React16 也给了我们方法:
<div>
// 方法1: 返回 array,不过每一项必须有 key render() { return [ <h1 key="a">a</h1>, <h1 key="b">b</h1>, ] } // 方法2: React.Fragment render() { return ( <React.Fragment> <h1>a</h1> <h1>b</h1> </React.Fragment> ) } // 方法3: 其实还是 React.Fragment,不过是简写 render() { return ( <> <h1>a</h1> <h1>b</h1> </> ) }
实例: https://stackblitz.com/edit/react-portal-tips
React.createPortal 可以让开发者在组件中写逻辑,而在页面的别的位置渲染出来:
React.createPortal
render() { return ReactDOM.createPortal( <div> this is a dialog </div>, document.body ); }
向我捐助 | 关于我 | 工作机会
The text was updated successfully, but these errors were encountered:
No branches or pull requests
createRef
实例: https://stackblitz.com/edit/react16-ref
之前已经有
string ref
(将被废弃) 和callback ref
,React16 新加入createRef
:new Context API
实例: https://stackblitz.com/edit/react16-new-context
life cycle
新加入
componentDidCatch
/getDerivedStateFromProps
/getSnapshotBeforeUpdate
三种生命周期,并且将componentWillMount
/componentWillReceiveProps
/componentWillUpdate
置为UNSAFE
。componentDidCatch
实例: https://stackblitz.com/edit/react-componentdidcatch
static getDerivedStateFromProps
实例: https://stackblitz.com/edit/react-getderivedstatefromprops
在组件实例化后和接受新 props 后被调用,需要 return 一个对象来更新状态或返回null表示新的props不需要任何state更新。
getSnapshotBeforeUpdate
在react render()后的输出被渲染到DOM之前被调用。
React.Fragment
实例: https://stackblitz.com/edit/react16-fragments
一直以来,React render 只能 return 组件,不能是 string、 array、 boolean等值,这其实限制了开发者的能力。React 16 给我们带来了这些新功能:
另外,render return 要求一定要有一个根组件,而开发者就不得不在外层套一个
<div>
,现在 React16 也给了我们方法:portal
实例: https://stackblitz.com/edit/react-portal-tips
React.createPortal
可以让开发者在组件中写逻辑,而在页面的别的位置渲染出来:The text was updated successfully, but these errors were encountered: