xgqfrms™, xgqfrms® : xgqfrms's offical website of GitHub!

React 17 发布候选版本，没有添加新功能

React v17.0 Release Candidate: No New Features

https://reactjs.org/blog/2020/08/10/react-v17-rc.html

React 17 版本不寻常，因为它没有添加任何面向开发人员的新功能。
取而代之的是，该发行版主要致力于简化 React 自身的升级。

React v16.0

https://reactjs.org/blog/2017/09/26/react-v16.0.html

# To install React 17 RC with npm, run:
$ npm i react@17.0.0-rc.0 react-dom@17.0.0-rc.0

# To install React 17 RC with Yarn, run:
$ yarn add react@17.0.0-rc.0 react-dom@17.0.0-rc.0

逐步升级策略

在过去的七年中，React 升级一直是“全有或全无”。
您可以使用旧版本，也可以将整个应用程序升级到新版本。没有中间的选择。
React 17支持逐步的 React升级。

这意味着当 React 18和下一个未来版本问世时，您现在将有更多选择。

https://reactjs.org/docs/legacy-context.html

1. 更改事件委托

在 React 17中，React将不再在文档级别附加事件处理程序。
取而代之的是，它将它们附加到渲染您的 React 树的根DOM容器中：

const rootNode = document.getElementById('root');
ReactDOM.render(<App />, rootNode);

微前端

in React 16 and earlier, React would do document.addEventListener() for most events.
React 17 will call rootNode.addEventListener() under the hood instead.

由于此更改，现在将由一个版本管理的React树嵌入到由其他React版本管理的树中更加安全。
这一变化还使将React嵌入到使用其他技术构建的应用程序中变得更加容易

捕获阶段

https://javascript.info/bubbling-and-capturing#capturing

document.addEventListener('click', function() {
  // Now this event handler uses the capture phase,
  // so it receives *all* click events below!
}, { capture: true });

其他重大变化

与浏览器对齐

https://codesandbox.io/s/strange-albattani-7tqr7?file=/src/App.js

没有事件池

React 17 从 React移除了“事件池”优化。
它不会提高现代浏览器的性能，甚至会使经验丰富的React用户感到困惑：

function handleChange(e) {
  setData(data => ({
    ...data,
    // This crashes in React 16 and earlier:
    text: e.target.value
  }));
}

这是因为React在旧浏览器中重用了不同事件之间的事件对象以提高性能，并将它们之间的所有事件字段都设置为null。

Effect Cleanup Timing


useEffect(() => {
  // This is the effect itself.
  return () => {
    // This is its cleanup.
  };
});

潜在问题

useEffect(() => {
  someRef.current.someSetupMethod();
  return () => {
    someRef.current.someCleanupMethod();
  };
});

问题在于someRef.current是可变的，因此在运行清除功能时，它可能已设置为null。

// solution
useEffect(() => {
  const instance = someRef.current;
  instance.someSetupMethod();
  return () => {
    instance.someCleanupMethod();
  };
});

https://github.com/facebook/react/tree/master/packages/eslint-plugin-react-hooks

返回未定义的一致错误

在React 16及更早版本中，返回undefined始终是一个错误：

function Button() {
  return; // Error: Nothing was returned from render
}

function Button() {
  // We forgot to write return, so this component returns undefined.
  // React surfaces this as an error instead of ignoring it.
  <button />;
}

在React 17中，forwardRef和 memo组件的行为与常规函数和类组件一致。从它们返回undefined是一个错误。

let Button = forwardRef(() => {
  // We forgot to write return, so this component returns undefined.
  // React 17 surfaces this as an error instead of ignoring it.
  <button />;
});

let Button = memo(() => {
  // We forgot to write return, so this component returns undefined.
  // React 17 surfaces this as an error instead of ignoring it.
  <button />;
});

对于您要故意不渲染任何内容的情况，请返回null。