2018-09-19盤点React 16.0~16.5主な更新とその応用(転載)を発表します.

 1 state = { isLogin: false }
 2 
 3 static getDerivedStateFromProps(nextProps, prevState) {
 4   if(nextProps.isLogin !== prevState.isLogin){
 5     return {
 6       isLogin: nextProps.isLogin
 7     }
 8   }
 9   return null
10 }
11 
12 componentDidUpdate(prevProps, prevState){
13   if(!prevState.isLogin && prevProps.isLogin) this.handleClose()
14 }

 1 class ScrollingList extends React.Component {
 2   constructor(props) {
 3     super(props)
 4     //   dom   
 5     this.listRef = React.createRef()
 6   }
 7 
 8   getSnapshotBeforeUpdate(prevProps, prevState) {
 9     //                      
10     if (prevProps.list.length < this.props.list.length) {
11       const list = this.listRef.current
12       return list.scrollHeight - list.scrollTop
13     }
14     return null
15   }
16 
17   componentDidUpdate(prevProps, prevState, snapshot) {
18     //    snapshot        ，        
19     if (snapshot !== null) {
20       const list = this.listRef.current
21       list.scrollTop = list.scrollHeight - snapshot
22     }
23   }
24 
25   render() {
26     return 
this.listRef}>{
     /* ...contents... */}
27   }
28 }

 1 ···
 2 
 3  componentDidCatch(error, info) {
 4     // Display fallback UI
 5     this.setState({ hasError: true });
 6     // You can also log the error to an error reporting service
 7     logErrorToMyService(error, info);
 8   }
 9 
10 ···

 1 // Context lets us pass a value deep into the component tree
 2 // without explicitly threading it through every component.
 3 // Create a context for the current theme (with "light" as the default).
 4 const ThemeContext = React.createContext('light')
 5 
 6 class App extends React.Component {
 7   render() {
 8     // Use a Provider to pass the current theme to the tree below.
 9     // Any component can read it, no matter how deep it is.
10     // In this example, we're passing "dark" as the current value.
11     return (
12       
13         
14       
15     )
16   }
17 }
18 
19 // A component in the middle doesn't have to
20 // pass the theme down explicitly anymore.
21 function Toolbar(props) {
22   return (
23     

24       
25     
26   )
27 }
28 
29 function ThemedButton(props) {
30   // Use a Consumer to read the current theme context.
31   // React will find the closest theme Provider above and use its value.
32   // In this example, the current theme is "dark".
33   return (
34     {theme => }
35   )
36 }
37        ：
38 
39    React.createContext    Context   
40      ，       Provider
41         ，           {theme => }   Context     。
42 Context API   Redux
43        ，    Context API          Redux   ，    ：
44 
45 const initialState = {
46   theme: 'dark',
47   color: 'blue',
48 }
49 
50 const GlobalStore = React.createContext()
51 
52 class GlobalStoreProvider extends React.Component {
53   render() {
54     return (
55       {
     this.props.children}
56     )
57   }
58 }
59 
60 class App extends React.Component {
61   render() {
62     return (
63       
64         
65           {context => (
66             

67               
{context.theme}
68               
{context.color}
69             
70           )}
71         
72       
73     )
74   }
75 }

全新的 Context API 带来的穿透组件的能力对于需要全局状态共享的场景十分有用，无需进入额外的依赖就能对状态进行管理，代码简洁明了。

React Strict Mode

React StrictMode 可以在开发阶段发现应用存在的潜在问题，提醒开发者解决相关问题，提供应用的健壮性。其主要能检测到 4 个问题：

• 识别被标志位不安全的生命周期函数
• 对弃用的 API 进行警告
• 探测某些产生副作用的方法
• 检测是否采用了老的 Context API

使用起来也很简单，只要在需要被检测的组件上包裹一层 React StrictMode ，示例代码 React-StictMode：

 1 class App extends React.Component {
 2   render() {
 3     return (
 4       

 5         
 6           
 7         
 8       
 9     )
10   }
11 }

React Strict Mode

 1 import React from 'react'
 2 import ReactDOM from 'react-dom'
 3 const modalRoot = document.querySelector('#modal')
 4 
 5 export default class Modal extends React.Component {
 6   constructor(props) {
 7     super(props)
 8     this.el = document.createElement('div')
 9   }
10   componentDidMount() {
11     modalRoot.appendChild(this.el)
12   }
13   componentWillUnmount() {
14     modalRoot.removeChild(this.el)
15   }
16   handleClose = () => [this.props.onClose && this.props.onClose()]
17   render() {
18     const { visible } = this.props
19     if (!visible) return null
20 
21     return ReactDOM.createPortal(
22       

23         {
     this.props.children}
24         this.handleClose}>[x]
25       
,
26       this.el
27     )
28   }
29 }

 1 // before React 16
 2 ···
 3 
 4   componentDidMount() {
 5     // the refs object container the myRef
 6     const el = this.refs.myRef
 7     // you can  also using ReactDOM.findDOMNode
 8     // const el = ReactDOM.findDOMNode(this.refs.myRef)
 9   }
10 
11   render() {
12     return 

13   }
14 ···
15 ···
16 // React 16+
17   constructor(props) {
18     super(props)
19     this.myRef = React.createRef()
20   }
21 
22   render() {
23     return 
this.myRef} />
24   }
25 ···
26 React.forwardRef
27          Ref    ,                    Ref，         DOM。
28 React.forwardRef       ，      props   ref。        ，    Refs:
29 
30 const TextInput = React.forwardRef((props, ref) => (
31   
32 ))
33 const inputRef = React.createRef()
34 
35 class App extends Component {
36   constructor(props) {
37     super(props)
38     this.myRef = React.createRef()
39   }
40 
41   handleSubmit = event => {
42     event.preventDefault()
43     alert('input value is:' + inputRef.current.value)
44   }
45   render() {
46     return (
47       
this.handleSubmit}>
48         
49         Submit
50       
51     )
52   }
53 } 
   
 
   
 
 
   
        React.forwardRef   props   ref       ，             。
 
   
Fragment
 
   
   DOM         ，           document.createDocumentFragment，          DocumentFragment  ，   DocumentFragment     DOM  ，    DOM                  。
 
   
  DocumentFragment   ，React     Fragment    ，     。  React 16   ，Fragment           react-addons-create-fragment   ，  React 16            'Fragment'。  ：
 
   
 
    
1 render() {
2   return (
3     
4       
5       
6       
7     
8   )
9 }
  
このように、  は  で  な の  を む  はないです. の    )，      。
  ，        ：
 
   
 
     
1 render() {
2   return (
3     <>
4       
5       
6       
7     >
8   )
9 }
  
   
 
   
 
 
   
  
 
   
ReactDOM   は    でReact Componentに ります.
1 render(){
2   return [
3     ,
4     ,
5   ]
6 }
  
  に  されたrenderを  し、すべてのプラグインが  して てきます.
  よく われていたreact-with-addons.js、react-addons-(css-)transition-group、react-addons-create-fragment、react-addons-pure-render-mixin など、  が  されている  はすべて  して つの  として いますので、  してください.
 め りをつける
  を て、React 16.0~16.5のアップグレードは   により  な  プロセスを えました.APIレベルの  、アーキテクチャの  、ツール の  はよりメンテナンスしやすいJavaScriptアプリケーションを  するために  しています.  を  し、  に  します.
  の  には りがありますので、  の には  があります.
  です
Find me on Github
  :
 React Docs 
 Update on Async Rendering 
 You Probably Don't Need Derived State 
 React v 16.3バージョンの ライフサイクル     およびアップグレードプログラム
 React 16:A look inside an API-comptible rewrite of our frontend UI library 
 React Fiber Architecture 
   :https://www.cnblogs.com/fpj-frank/p/9969439.html