? ???? ?? react16? ??? ?? ? ??? ????, React16? ??? ?? ??? ?????. ? ?? ?? ??? ???????

React 16 ????

??? js ?? ?? ??

react16依靠Map和Set集合和requestAnimationFrame（一個針對動畫效果的API）

??? ??

-?Fragments：render函數(shù)可以返回?cái)?shù)組和字符串
-?error?boundaries：錯誤處理
-?portals?：支持聲明性地將子樹渲染到另一個DOM節(jié)點(diǎn)
-?custom?DOM?attributes?：ReactDom允許傳遞非標(biāo)準(zhǔn)屬性
-?improved?server-side?rendering:提升服務(wù)端渲染性能

1. Fragments

   render()?{
   ??return?[
   ????<li key="A"/>First?item</li>,
   ????<li key="B"/>Second?item</li>,
   ????<li key="C"/>Third?item</li>,
   ??];
   }

   ??? ??? API

2. ?? ??

   ? ?????. ???? ?? ??? ??? ???? ?? ?? ?? ??? ?? ???? ??? ???????. React 16??? ?? ???? ???? "?? ??"? ???? Error Boundary ??? ?????. ?????? ??? ???? Error Boundary? ???? ? ??? ???? ??? ? ????. . ??? ?? ?? ??? ?????. Error Boundary? ??? React ?? ??? ??? ? ????. ?? ?? ? ?? ??? ?? ??? ???? ?? ?? ?? ? ?? ?? ?? ?? ??? ???? ????? ??? ? ????. (??: ?? ?? ?? ???? ??? ?? ?? ??? ??? ????? ????. ???? try-catch ??? ???? ???.)

   ??:

   ?? ?? ?? ?? ?? ?? ??:

   class?ErrorBoundary?extends?React.Component{
   ????constructor(props){
   ????????super(props);
   ????????this.state=({
   ????????????ifError:false
   ????????});
   ????}
   
   ????componentDidCatch(err,?info)?{
   ????????this.setState({?ifError:?true?})
   ????????console.log(err);
   ????}
   
   ????render(){
   ????????if(this.state.ifError){
   ????????????return?`this?or?its?children?has?error`;
   ????????}
   ????????return?this.props.children
   ????}
   }

   Create A ??? ??? ?? ?? ?? ??:

   class?ErrorComponent?extends?React.Component{
   ????render(){
   ????????const?str?=?'123';
   ????????return?str.toFixed(2);
   ????}
   }

   ?? ?? ?? ??? ???? ??? ? ?? ?? ??? ??

   class?MainShowComponent?extends?React.Component{
   ????render(){
   ????????return?(
   ????????????<p>
   ????????????????<ErrorBoundary>
   ????????????????????<ErrorComponent/>
   ????????????????</ErrorBoundary>
   ????????????</p>
   ????????)
   ????}
   }

   ?? ?? ?? ??? ??? ?? ?? ???? ??? ???? ?? ?? ??? ???? ?????. ?? ?? ?? ??? ????? ?? ??? ??????. (??? ??? ?? ??? PHP ??? ????React Reference Manual ?? ???? ?????.)

3. Portals

   Portals? ??? DOM ?? ?? ??? ?? DOM? ??? ???? ?? ??? ??? ?????. ?? ?? ??.

   ReactDOM.createPortal(
   ??child,
   ??container
   );

   ? ?? ????(??)? ??, ??? ?? ??? ?? ??? ??? React ?? ?????. ? ?? ????(????)? DOM ?????.

   ????? ?? ??? ??? ????? ??? ???? ?? ??? ?? ??? ???? DOM? ?????.

   render()?{
   ??//?React?mounts?a?new?p?and?renders?the?children?into?it
   ??return?(
   ????<p>
   ??????{this.props.children}
   ????</p>
   ??);
   }

   ??? ??? DOM? ?? ??? ??? ???? ?? ??? ? ????.

   render()?{
   ??//?React?does?*not*?create?a?new?p.?It?renders?the?children?into?`pNode`.
   ??//?`pNode`?is?any?valid?DOM?node,?regardless?of?its?location?in?the?DOM.
   ??return?React.createPortal(
   ????this.props.children,
   ????pNode,
   ??);
   }

   ?? ? ??? ???? ?? ??? ??? ?? ????? CodePen ??? ?????.

4. ??? ?? DOM ??

   ??? ??? ?? DOM ??? ?????. ?? ????? React? ??? ? ?? HTML ? SVG ??? ??????. ??? ?? ??? data-* ??? ???? ??? ? ????. ?? ??? ??? DOM? ?? ??? ? ????. ? ??? ?? React? ?? ?? ??? ???? ?? ??? ?? ? ????. ??? DOM? ??? ??? ?? ??? ?? ?? ?? ??? ??? ??? ?? React??? ?????.

   <p a={()=>{}}></p>???//錯誤

5. ?? ? ??? ?? ??

   ?? ? ??? ?? ??, React 16? SSR? ??? ?? ???????. ??? ??? ?? ??? React 15 ??? ?? 3?? ??? ?? ???? ?? ????? ?????. ???? ???? ?????? ? ??? ?? ? ????.

?? ?? ??

• ?? ? ?? ?? ??

• null? ???? ?? setState? ???? ???? ?????? ???? ???? ???? ?? ?????? ??? ??? ? ????.

  this.setState(
  ????(state)=>{
  ????????if(state.curCount%2?===?0){
  ????????????return?{curCount:state.curCount+1}
  ????????}else{
  ????????????return?null;
  ????????}
  
  ????}
  )

• ??? ????? setState? ???? ?? ????? ????? ?? ????? ???? ????. ??? ????? setState? ???? ???.

• setState? ?? ??? ?? ?? ??? ???? ?? ???, componentDidMount/ComponentDidUpdate? ??? ??? ?????.

  ????this.setState(
  ????????(state)=>{
  ????????????if(state.curCount%2?===?0){
  ????????????????return?{curCount:state.curCount+1}
  ????????????}else{
  ????????????????return?null;
  ????????????}
  
  ????????},
  ????????()=>{
  ????????????console.log(this.state.curCount);
  ????????}
  ????)

1. ReactDOM.render() ? ReactDom.unstable_renderIntoContainer()? ?? ?? ???? ???? null? ?????. ??? ??? ??? ????? ???? refs

2. setState ?? ??? ??? ? ????.

3. ? ?? ?? ?? <A /> 和 <B / >? ???? B.comComponentWillMount? ?? A.comComponentWillUnmount ??? ???? A.comComponentWillUnmount ??? ?????. ??? ??? ? ????.

4. ?? ????? ????? ref? ??? ? ?? ????? render ???? ???? ?? ref? dom? ???????. ?? dom ??? ??? ??? ref ??? ???? ref? dom?? ???? ????.

5. React? ?? ?? ??? ???? ????? ?? ????? ?? ???? ????. ?? ????? ? ??? ???? ?? ??? ???? ?? ? ????. ?? ? ??? ?? ??? ???? ReactDOM.unmountComponentAtNode? ???? ?? ??? ??? ???.

   ReactDOM.render(<App />,?p);
   p.innerHTML?=?'nope';
   ReactDOM.render(<App />,?p);//渲染一些沒有被正確清理的東西

   ??? ??? ?????.

   ReactDOM.render(<App />,?p);
   ReactDOM.unmountComponentAtNode(p);
   p.innerHTML?=?'nope';
   ReactDOM.render(<App />,?p);?//?Now?it's?okay

   ? ??? ?????

6. comComponentDidUpdate ?? ??? ? ?? prevContext ?? ??? ???? ????.

7. ???? ?? ?? ???? ?? ????? ????? ??? ? ????. ???? ?? ?? ???? ?? ???? ??? ??? ?? ??? ???? ??? ??????.

8. DOM ??? ??? ? ?? ??? Shallow ???? ? ?? componentDidUpdate()? ????? ????. ?? ?? ?? ??? componentDidMount() ??? ???? ?????.

9. Shallow ???? ? ?? ????_batchedUpdates()? ???? ????.

10. ReactDOM.unstable_batchedUpdates?? ?? ?? ?? ?? ????? ??? ????.

?? ??? ???? ??? ??? ???? ?? ?? ?? ???? ??? ??? ??? ???????

• react/dist/react.js → React/umd/react.development.js

• react/dist/react .min.js → ??/umd/react.production.min.js

• react-dom/dist/react-dom.js → ??-dom/umd/ React-dom.development.js

• react-dom/dist/react-dom.min.js → React-dom/umd/react-dom.production.min Node.js ???? ? ?? ??? ??? ??? ???? ?? ?? ??? ???? ?? DOM? ???? ???? ?????. ?? ? ?? ? ??? ??? ??? ??? ? ?? ??? ??? ???? ????.

?? ?? ??? ????? ?? ???? API? ????. ???? ???? HTML? ???? ?? ReactDOM.render ?? ReactDOM.hydrate? ?????. ?????? ???? ???? ?? ReactDOM.render? ?? ?????.

• ? ? ?? ??? DOM ?? ??? ???? React? ??? ?? ?? ?? ??? DOM?? ??????. ?? ??

• ??? ? ?? ?? ??? ??? ????? ?? DOM ??? ??????. ?? ????? UI? ?? ??? ?? ??? ??? ? ????. .

DEPRECATED

React-with-addons.js? ? ?? ???? ??? ???? ?? ???? ??? ????. npm?? ??? ???????, ??? ?? ?? ?? ???? ??? ????.

15.x ??? ?? ??? ?? ????? ???????. ?? React.createClass? create-react-class? ??? ? ??? React.PropTypes? ??? ????. props -types?, React.DOM? React-dom-factories?, React-addons-test-utils? React-dom/test-utils?, ?? ???? React-test-renderer/shallow? ??? ? ????. 15.5.0 ? 15.6.0 ??? ??? ?????.

? ?? ???? ????. (??? ??? ??? PHP ??? ????
• React ??? ???

  ?? ?????.), ??? ???? ??? ???? ?????.

? ??? React 16? ??? ??? ?????? React16? ??? ??? ?? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!