React 16.6

React.memo

以 function 宣告 React.PureComponent

const Component = React.memo(function Component(props) {
	return (<div>{props.content}</div>)
})

//以上宣告等同於:
class Component extends React.PureComponent {
	constructor(props) {
		super(props);
	}
	
	/** @override */
	render() {
		return (<div>{props.content}</div>);
	}
}

React.lazy

當使用到某 React Component 時, 再進行加載

import React, {lazy, Suspense} from "react";
//OtherComponent 僅在使用時加載
const OtherComponent = lazy(() => import("./OtherComponent.js"));

function MyComponent() {
  return (
	<Suspense fallback={<div>Loading...</div>}>
	  <OtherComponent />
	</Suspense>
  );
}

Context API 優化

const SomeContext = React.createContext({backgroundColor: "dark"});

class ParentComponent extends React.Component {
	render() {
		return (
			<SomeContext.Provider value={{backgroundColor: "#FF0000"}}>
				<ChildComponent/>
			</SomeContext.Provider>
		)
	}
}

class ChildComponent extends React.Component {
	render() {
		const context = this.context;
		const style = {
			//context.backgroundColor 在此例中為 ”＃FF000“
			backgroundColor: context.backgroundColor
		}
		
		return (
			<div style={style}>
				ChildComponent
			</div>
		)
	}
}
ChildComponent.contextType = SomeContext;

static getDerivedStateFromError()

可以透過 Error Boundaries 更新 state

增加 Strict Mode 示警的 deprecated-API

以下 API 的調用也會產生 Warning

• ReactDOM.findDOMNode()

• Legacy Context：舊的 Context API

React 16.7

React.lazy bugfix