免责声明
这是来自官方博客的原始文章的免费翻译。为什么免费?而是因为原件包含过多的水分,并提及过去做出某些决定的原因。
没什么新鲜的?
由于缺少新特性和/或功能,React的第十七版是不寻常的。此版本的重点是增加将来可以逐步更新库的下一个主要版本的项目的功能,这与具有大型代码库的项目有关。
有希望的并发模式将不会在版本17中以及团队正在积极致力于的其他创新中引入。即将发布的版本是逐步(部分)更新策略的一部分。
逐步更新
在过去的7年中,React更新几乎是一事无成。我们要么升级到新版本,要么继续使用旧版本。有时,有必要更改代码库中的某些内容,例如,使用过时的Context API(无法自动传输)进行更改。
React 17带来了逐步更新策略。团队修复了React 17中的许多现有问题。这使库的下一个版本在升级时具有更多选项。
: . . , (React 18, React 19), - lazy- React 17.
, (lazy-load) React. React 17.0.0-rc.0, , , React 16.8
React 17
, onClick
, DOM-. document
. , .
, , React , jQuery, . event.stopPropagation()
: (propagation) , . React. Atom .
, document:
const rootNode = document.getElementById('root'); // <--
ReactDOM.render(<App />, rootNode);
(SyntheticEvent Even Pooling)
17- , .
function handleChange(event) {
// 16 React event.persist()
setData(data => ({
...data,
// This crashes in React 16 and earlier:
text: event.target.value
}));
}
, event.persist()
. Facebook . , - !
. React .
useEffect()
useEffect(() => {
// This is the effect itself.
return () => {
// This is its cleanup.
};
});
, , componentWillUnmount()
, , , , , .
, - useLayoutEffect()
, .
undefined
, .
undefined
, React.forwardRef
React.memo
.
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 />;
});
, stack trace . , , .
, Button
, React- .
17- React , React-, , production-.
— , . , React Native for Web , .
17- React . - , , .
ReactTestUtils.SimulateNative
. , .
Changelog
新版本的React还包括React的5个更改,React Dom的37个更改,React DOM Server的几个更改,React Test Rerender的一个更改。
并发模式呢?
此模式仍处于实验阶段。在第17个React中修复了许多错误,删除了一些unstable_
方法,并添加了新的方法。现在将其用于生产还为时过早,但是戳戳绝对是必要和必要的。例如,有一个库用于使用Firebase,reactfire,其开发人员使主要版本依赖于并发模式。不幸的是,该存储库似乎在过去几个月中被废弃了。希望这个问题能解决。