React 16新特性

React 16新特性
React v16.0
render方法支持直接返回string，number，boolean，null，portal，以及fragments(带有key属性的数组)，这可以在一定程度上减少页面的DOM层级
portal 可以将组件放在其父节点以外的节点。
ReactDOM.createPortal(child, container)

第一个参数（child）是任何可渲染的 React 子元素，例如一个元素，字符串或 fragment。第二个参数（container）是一个 DOM 元素。
使用Error Boundary处理错误组件
错误边界是一种React组件。它及其子组件形成一个树型结构，能捕获JavaScript中所有位置的错误，记录下错误，并且还能显示一个后备界面，避免让用户直接看到组件树的崩溃信息。
错误边界目前只在 Class Component 中实现了，没有在 hooks 中实现（因为Error Boundaries的实现借助了this.setState可以传递callback的特性，useState无法传入回调，所以无法完全对标）;
注意 开发环境无法使用Error Boundary，必须build后
用法：使用ErrorBoundary将会发生错误的代码包进去即可
yarn add react-error-boundary
import { ErrorBoundary } from “react-error-boundary”;

function Bomb() {
throw new Error(“💥 CABOOM 💥”);
}

function App() {
const [explode, setExplode] = React.useState(false);
return (

<button onClick={() => setExplode((e) => !e)}>toggle explode
<ErrorBoundary
FallbackComponent={ErrorFallback}
onReset={() => setExplode(false)}
resetKeys={[explode]}
>
{explode ? : null}

);
}

React v16.2
Fragment；

<React.Fragment>



</React.Fragment>

和我们现在经常用的
<>



</>

目的一样，Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

React v16.3
● createContext、createRef、forwardRef、生命周期函数的更新、Strict Mode；
createContext:
Context 设计目的是为了共享那些对于一个组件树而言是“全局”的数据，例如当前认证的用户、主题或首选语言
用法：
父组件
父组件中
export const ThemeContext = React.createContext(“light”);
…
return (
<ThemeContext.Provider value=“dark”>
<子组件 />
</ThemeContext.Provider>
);
子组件中
return <> <子组件的子组件/> </>
子组件的子组件中
import ThemeContext from ‘ThemeContext所在文件’
const App = () => {
const value = useContext(ThemeContext);
return (
<div
style={{ background: “yellow” }}
onClick={() => {
console.log(value);
}}
>
TEST

);
};

createRef：
React.createRef 创建一个能够通过 ref 属性附加到 React 元素的 ref。
const Pigeonhole = () => {
const inputRef = React.createRef();
return (
<>

<div
onClick={() => {
console.log(inputRef);
//inputRef： input 所有的属性的集合
let dom = document.getElementById(“input”);
dom.focus();
inputRef.current.focus();
}}
>
TEST

</>
);
};

forwardRef：
React.forwardRef 会创建一个React组件，这个组件能够将其接受的 ref 属性转发到其组件树下的另一个组件中
React.forwardRef 接受渲染函数作为参数。React 将使用 props 和 ref 作为参数来调用此函数。此函数应返回 React 节点。
子组件：
当没用forwardRef创建子组件的时候
父：
const inputRef = createRef();
<>

<button
onClick={() => {
console.log(inputRef);
//inputRef.current.focus();
}}
>
father

</>
这个时候父组件inputRef打印出来为null
当用forwardRef创建子组件的时候
const App = forwardRef((params, inputRef) => {
return (
<>


孩子

</>
);
});
这个时候父组件inputRef打印出来为子组件 input 所有的属性的集合

Strict Mode：严格模式
https://zh-hans.reactjs.org/docs/strict-mode.html
React v16.4
● Pointer Events、update getDerivedStateFromProps；
Pointer Events
target指的是被点击的DOM节点(触发点)
注册的事件指on开头的事件或者addEventListeber这类
对于非target节点，先捕获再冒泡
对于target节点，先执行先注册的事件，无论是冒泡还是捕获

React v16.5
● Profile
Profiler 能添加在 React 树中的任何地方来测量树中这部分渲染所带来的开销
用法：
function onRenderCallback(
id, // 发生提交的 Profiler 树的 “id”
phase, // “mount” （如果组件树刚加载） 或者 “update” （如果它重渲染了）之一
actualDuration, // 本次更新 committed 花费的渲染时间
baseDuration, // 估计不使用 memoization 的情况下渲染整棵子树需要的时间
startTime, // 本次更新中 React 开始渲染的时间
commitTime, // 本次更新中 React committed 的时间
interactions // 属于本次更新的 interactions 的集合
) {
// 合计或记录渲染时间。。
console.log(
id, // 发生提交的 Profiler 树的 “id”
phase, // “mount” （如果组件树刚加载） 或者 “update” （如果它重渲染了）之一
actualDuration, // 本次更新 committed 花费的渲染时间
baseDuration, // 估计不使用 memoization 的情况下渲染整棵子树需要的时间
startTime, // 本次更新中 React 开始渲染的时间
commitTime, // 本次更新中 React committed 的时间
interactions // 属于本次更新的 interactions 的集合
);
}
//Navigation update 0 0 57313.90000009537 57314.5 Set(0) {size: 0}

React v16.6
● memo、lazy、Suspense；
memo
React.memo 为高阶组件。如果你的组件在相同 props 的情况下渲染相同的结果，那么你可以通过将其包装在  React.memo 中调用，以此通过记忆组件渲染结果的方式来提高组件的性能表现。这意味着在这种情况下，React 将跳过渲染组件的操作并直接复用最近一次渲染的结果。 React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState，useReducer 或 useContext 的 Hook，当 state 或 context 发生变化时，它仍会重新渲染。此方法仅作为https://zh-hans.reactjs.org/docs/optimizing-performance.html的方式而存在。但请不要依赖它来“阻止”渲染，因为这会产生 bug。
lazy
import React, { Suspense } from ‘react’;

const OtherComponent = React.lazy(() => import(‘./OtherComponent’));
function MyComponent() {
return (

<Suspense fallback={

Loading…

}>

);
}

react项目非常庞大的时候，会导致打包文件build.js文件也特别复杂，庞大，从而导致首页加载缓慢，影响用户体验。所以我们希望有些比较大的组件，只在此组件被加载时，内部资源才被引用。这就是代码分割，也就是react.lazy的作用。
Suspense 
Suspense 使得组件可以“等待”某些操作结束后，再进行渲染。目前，Suspense 仅支持的使用场景是：通过 React.lazy 动态加载组件。它将在未来支持其它使用场景，如数据获取等。
React v16.7（~Q1 2019）
Hooks；
https://zh-hans.reactjs.org/docs/hooks-intro.html
新增的hooks：
● https://zh-hans.reactjs.org/docs/hooks-reference.html#basic-hooks
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usestate
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#useeffect
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usecontext
● https://zh-hans.reactjs.org/docs/hooks-reference.html#additional-hooks
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usereducer
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usecallback
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usememo
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#useref
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#useimperativehandle
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#uselayouteffect
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usedebugvalue
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usedeferredvalue
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usetransition
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#useid
● https://zh-hans.reactjs.org/docs/hooks-reference.html#library-hooks
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#usesyncexternalstore
○ https://zh-hans.reactjs.org/docs/hooks-reference.html#useinsertioneffect

React v16.8（~Q2 2019）
● Concurrent Rendering；
Concurrent Rendering 并发渲染模式是在不阻塞主线程的情况下渲染组件树，使 React 应用响应性更流畅，它允许 React 中断耗时的渲染，去处理高优先级的事件，如用户输入等，还能在高速连接时跳过不必要的加载状态，用以改善 Suspense 的用户体验。
react 18 发布了
React v16.9（~mid 2019）
● 最主要插入了Profile 16.5