ディスクラマー
これは公式ブログの元の記事の無料翻訳です。なぜ無料なのか?むしろ、オリジナルには水が多すぎて、過去に行われた特定の決定の理由への言及があるためです。
何も新しいことはありませんか?
Reactの17番目のリリースは、新しい機能や機能がないために珍しいものです。このリリースは、将来、ライブラリの次のメジャーバージョンのプロジェクトを段階的に更新する機能の追加に焦点を当てています。これは、大規模なコードベースを持つプロジェクトに関連しています。
Concurrent Mode 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の2つの変更、React TestRerenderの1つの変更も含まれています。
コンカレントモードはどうですか?
このモードはまだ実験段階です。17番目のReactでは、多くのバグが修正され、いくつかのunstable_
メソッドが削除され、新しいメソッドが追加されました。生産に使用するには時期尚早ですが、それを突くのは間違いなく可能であり、必要です。たとえば、Firebase、reactfireを操作するためのライブラリがあり、その開発者はメインバージョンをコンカレントモードに依存させました。残念ながら、リポジトリは過去数か月間放棄されているようです。これが修正されることを願っています。