Skip to content

Commit

Permalink
Merge branch 'main' into main
Browse files Browse the repository at this point in the history
  • Loading branch information
FanetheDivine authored Sep 12, 2024
2 parents 8fd4bc5 + 69a1e64 commit a75dfd3
Show file tree
Hide file tree
Showing 41 changed files with 255 additions and 233 deletions.
2 changes: 1 addition & 1 deletion src/components/Layout/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -284,7 +284,7 @@ export function Footer() {
<div
className="text-xs text-left rtl:text-right mt-2 pe-0.5"
dir="ltr">
&copy;{new Date().getFullYear()}
Copyright &copy; Meta Platforms, Inc
</div>
<div
className="uwu-visible text-xs cursor-pointer hover:text-link hover:dark:text-link-dark hover:underline"
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2022/03/08/react-18-upgrade-guide.md
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@ root.render(<AppWithCallbackAfterRender />);

</Note>

最后如果应用通过 hydrate 使用了服务端渲染,你需要将 `hydrate` 升级到 `hydrateRoot`
最后如果应用通过激活使用了服务端渲染,你需要将 `hydrate` 升级到 `hydrateRoot`

```js
// 之前
Expand Down Expand Up @@ -306,7 +306,7 @@ globalThis.IS_REACT_ACT_ENVIRONMENT = true;
## 其他破坏性变更 {/*other-breaking-changes*/}

* **一致的 useEffect 时间**:现在,如果更新是在类似点击或者敲击键盘事件这样的离散用户输入事件期间触发,React 总是同步刷新 Effect 函数。而之前的行为不是一直可预测或者一致的。
* **更严格的 hydrate 报错**由于缺失或者额外的文本而导致的 hydrate 不匹配现在会作为错误而不是告警对待。React 将不再试图通过在客户端增加或删除节点来“修补”单个节点来匹配服务端标记,并且将会回退客户端渲染到树中最近的 `<Suspense>` 边界。这可以保证 hydrate 树保持一致并且避免可能由 hydrate 不匹配导致的隐私和安全漏洞
* **更严格的激活报错**由于缺失或者额外的文本而导致的激活内容不匹配现在会作为错误而不是告警对待。React 将不再试图通过在客户端增加或删除节点来“修补”单个节点来匹配服务端标记,并且将会回退客户端渲染到树中最近的 `<Suspense>` 边界。这可以保证激活树保持一致并且避免可能由激活内容不匹配导致的隐私和安全漏洞
* **Suspense 树一直保持一致**:如果一个组件在它完全被添加到树上之前挂起,React 将不会把它以不完整的状态添加到树或者触发它的 effect。React 会完全扔掉新树,等待异步操作结束,然后重新尝试从头开始再次渲染。React 会同时渲染重试尝试,并且不会阻塞浏览器。
* **使用 Suspense 的 Layout Effect**:当一个树重新挂起并恢复为后备方案时,现在的 React 会清理 layout effect,然后在边界内的内容再次显示时重新创建它们。这修复了一个在与 Suspense 一起使用时的问题:阻止组件库正确测量布局。
* **新的 JavaScript 环境要求**:React 现在依赖于现代浏览器特性,包括 `Promise``Symbol``Object.assign`。如果你需要支持像 Internet Explorer 这样较老版本的浏览器和设备,它们本身不提供现代浏览器特性或者有不兼容的实现,可以考虑在打包后的应用中包含全局的 polyfill。
Expand Down
8 changes: 4 additions & 4 deletions src/content/blog/2022/03/29/react-v18.md
Original file line number Diff line number Diff line change
Expand Up @@ -180,7 +180,7 @@ React 18 中的 Suspense 在与 Transition API 结合时效果最好。如果你
* `createRoot`:为 `render` 或者 `unmount` 创建根节点的新方法。请用它替代 `ReactDOM.render`。如果没有它,React 18 中的新功能就无法生效。
* `hydrateRoot`:hydrate 服务端渲染的应用的新方法。使用它来替代 `ReactDOM.hydrate` 与新的 React DOM 服务端 API 一起使用。如果没有它,React 18 中的新功能就无法生效。

`createRoot``hydrateRoot` 都能接受一个新的可选参数叫做 `onRecoverableError`,它能在 React 在渲染或者 hydrate 过程发生错误后又恢复时,做日志记录对你进行通知。默认情况下,React 会使用 [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError),如果在老旧版本浏览器中,则会使用 `console.error`
`createRoot``hydrateRoot` 都能接受一个新的可选参数叫做 `onRecoverableError`,它能在 React 在渲染或者激活过程发生错误后又恢复时,做日志记录对你进行通知。默认情况下,React 会使用 [`reportError`](https://developer.mozilla.org/en-US/docs/Web/API/reportError),如果在老旧版本浏览器中,则会使用 `console.error`


[参阅 React DOM Client 的文档](/reference/react-dom/client)
Expand Down Expand Up @@ -232,7 +232,7 @@ React 18 中的 Suspense 在与 Transition API 结合时效果最好。如果你

#### useId {/*useid*/}

`useId` 是一个新的Hook,用于生成在客户端和服务端两侧都独一无二的 id,避免 hydrate 后两侧内容不匹配。它主要用于需要唯一 id 的,具有集成 API 的组件库。这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题,而且它会在 React 18 中发挥更重要的作用,因为新的流式服务端渲染响应 HTML 的方式将是无序的,需要独一无二的 id 作为索引。[参阅文档](/reference/react/useId)
`useId` 是一个新的Hook,用于生成在客户端和服务端两侧都独一无二的 id,避免激活后两侧内容不匹配。它主要用于需要唯一 id 的,具有集成 API 的组件库。这个更新不仅解决了一个在 React 17 及更低版本中的存在的问题,而且它会在 React 18 中发挥更重要的作用,因为新的流式服务端渲染响应 HTML 的方式将是无序的,需要独一无二的 id 作为索引。[参阅文档](/reference/react/useId)

> Note
>
Expand Down Expand Up @@ -299,12 +299,12 @@ React 18 中的 Suspense 在与 Transition API 结合时效果最好。如果你
* 修复生成的 License 头。([#23004](https://github.com/facebook/react/pull/23004) [@vitaliemiron](https://github.com/vitaliemiron))
* 添加 `package.json` 作为入口点之一。 ([#22954](https://github.com/facebook/react/pull/22954) [@Jack](https://github.com/Jack-Works))
* 允许在 Suspense 边界外挂起。([#23267](https://github.com/facebook/react/pull/23267) [@acdlite](https://github.com/acdlite))
* 每当 hydrate 失败时记录一个可恢复的错误。([#23319](https://github.com/facebook/react/pull/23319) [@acdlite](https://github.com/acdlite))
* 每当激活失败时记录一个可恢复的错误。([#23319](https://github.com/facebook/react/pull/23319) [@acdlite](https://github.com/acdlite))

### React DOM {/*react-dom*/}

* 添加 `createRoot` 和 `hydrateRoot`。([#10239](https://github.com/facebook/react/pull/10239),[#11225](https://github.com/facebook/react/pull/11225),[#12117](https://github.com/facebook/react/pull/12117),[#13732](https://github.com/facebook/react/pull/13732),[#15502](https://github.com/facebook/react/pull/15502),[#15532](https://github.com/facebook/react/pull/15532),[#17035](https://github.com/facebook/react/pull/17035),[#17165](https://github.com/facebook/react/pull/17165),[#20669](https://github.com/facebook/react/pull/20669),[#20748](https://github.com/facebook/react/pull/20748),[#20888](https://github.com/facebook/react/pull/20888),[#21072](https://github.com/facebook/react/pull/21072),[#21417](https://github.com/facebook/react/pull/21417),[#21652](https://github.com/facebook/react/pull/21652),[#21687](https://github.com/facebook/react/pull/21687),[#23207](https://github.com/facebook/react/pull/23207),[#23385](https://github.com/facebook/react/pull/23385) [@acdlite](https://github.com/acdlite),[@bvaughn](https://github.com/bvaughn),[@gaearon](https://github.com/gaearon),[@lunaruan](https://github.com/lunaruan),[@rickhanlonii](https://github.com/rickhanlonii),[@trueadm](https://github.com/trueadm),and [@sebmarkbage](https://github.com/sebmarkbage))
* 添加选择性 hydrate。([#14717](https://github.com/facebook/react/pull/14717)[#14884](https://github.com/facebook/react/pull/14884)[#16725](https://github.com/facebook/react/pull/16725)[#16880](https://github.com/facebook/react/pull/16880)[#17004](https://github.com/facebook/react/pull/17004)[#22416](https://github.com/facebook/react/pull/22416)[#22629](https://github.com/facebook/react/pull/22629)[#22448](https://github.com/facebook/react/pull/22448)[#22856](https://github.com/facebook/react/pull/22856)[#23176](https://github.com/facebook/react/pull/23176) [@acdlite](https://github.com/acdlite)[@gaearon](https://github.com/gaearon)[@salazarm](https://github.com/salazarm),and [@sebmarkbage](https://github.com/sebmarkbage))
* 添加选择性激活。([#14717](https://github.com/facebook/react/pull/14717)[#14884](https://github.com/facebook/react/pull/14884)[#16725](https://github.com/facebook/react/pull/16725)[#16880](https://github.com/facebook/react/pull/16880)[#17004](https://github.com/facebook/react/pull/17004)[#22416](https://github.com/facebook/react/pull/22416)[#22629](https://github.com/facebook/react/pull/22629)[#22448](https://github.com/facebook/react/pull/22448)[#22856](https://github.com/facebook/react/pull/22856)[#23176](https://github.com/facebook/react/pull/23176) [@acdlite](https://github.com/acdlite)[@gaearon](https://github.com/gaearon)[@salazarm](https://github.com/salazarm),and [@sebmarkbage](https://github.com/sebmarkbage))
* 在已知的 ARIA 属性列表中增加 `aria-description`。([#22142](https://github.com/facebook/react/pull/22142) [@mahyareb](https://github.com/mahyareb))
* 为 video 元素添加 `onResize` 事件。([#21973](https://github.com/facebook/react/pull/21973) [@rileyjshaw](https://github.com/rileyjshaw))
*`imageSizes``imageSrcSet` 添加到已知属性中。([#22550](https://github.com/facebook/react/pull/22550) [@eps1lon](https://github.com/eps1lon))
Expand Down
4 changes: 2 additions & 2 deletions src/content/blog/2023/03/16/introducing-react-dev.md
Original file line number Diff line number Diff line change
Expand Up @@ -269,7 +269,7 @@ body {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked && ''}
{name} {isPacked && ''}
</li>
);
}
Expand Down Expand Up @@ -307,7 +307,7 @@ export default function PackingList() {
function Item({ name, isPacked }) {
return (
<li className="item">
{name} {isPacked ? '' : ''}
{name} {isPacked ? '' : ''}
</li>
);
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ React 编译器不再是一个研究项目:该编译器现在已经在生产

正如我们在 [之前的文章](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-optimizing-compiler) 中所讨论的,当状态发生变化时,React 有时会过度重新渲染。自 React 早期以来,我们对这种情况的解决方案一直是手动记忆化。在我们当前的 API 中,这意味着使用 [`useMemo`](/reference/react/useMemo)[`useCallback`](/reference/react/useCallback)[`memo`](/reference/react/memo) API 手动调整 React 在状态变化时重新渲染的程度。但是手动记忆化是一种妥协。它会使我们的代码变得混乱、很容易出错,并且需要额外的工作来保持更新。

手动记忆化是一个合理的妥协,但我们并不满意。我们的愿景是当状态发生变化时 React 可以自动重新渲染 UI 的恰当部分,而不是向 React 的核心心智模型妥协。我们相信 React 的方式——将 UI 视为状态的简单函数,使用标准的 JavaScript 值和习惯用法——是 React 为许多开发人员提供可接近性的关键部分。这就是为什么我们投资于构建 React 的优化编译器的原因。
手动记忆化是一个合理的妥协,但我们并不满意。我们的愿景是当状态发生变化时 React 可以自动重新渲染 UI 的恰当部分,而不是向 React 的核心心智模型妥协。我们相信 React 的方式——将 UI 视为状态的简单函数,使用标准的 JavaScript 值和习惯用法——是 React 为许多开发人员提供可接近性的关键部分。这就是我们投资于构建 React 的优化编译器的原因。

JavaScript 是一个因其松散规则和动态特性而闻名的具有挑战性的语言。React 编译器能够通过模拟 JavaScript 的规则和“React 的规则”来安全地编译代码。例如,React 组件必须是幂等的——给定相同的输入返回相同的值——并且不能突变 props 或状态值。这些规则限制了开发人员可以做的事情,并为编译器优化开辟了一个安全的空间。

Expand Down
8 changes: 4 additions & 4 deletions src/content/blog/2024/04/25/react-19.md
Original file line number Diff line number Diff line change
Expand Up @@ -378,7 +378,7 @@ function MyInput({placeholder, ref}) {

</Note>

### hydration 错误的差异 {/*diffs-for-hydration-errors*/}
### 激活错误的差异 {/*diffs-for-hydration-errors*/}

`react-dom` 中,我们也改进了水合错误的错误报告。例如,现在不再在 DEV 中记录多个没有任何不匹配信息的错误:

Expand Down Expand Up @@ -682,11 +682,11 @@ function MyComponent() {

### 兼容第三方脚本和扩展 {/*compatibility-with-third-party-scripts-and-extensions*/}

我们改进了 hydration,以考虑第三方脚本和浏览器扩展。
我们改进了激活机制,以考虑第三方脚本和浏览器扩展。

在 hydration 过程中,如果在客户端渲染的元素与从服务器获取的 HTML 中找到的元素不匹配,React 将强制进行客户端重新渲染以修复内容。以前,如果一个元素是由第三方脚本或浏览器扩展插入的,它会触发一个不匹配的错误并进行客户端渲染。
在激活过程中,如果在客户端渲染的元素与从服务器获取的 HTML 中找到的元素不匹配,React 将强制进行客户端重新渲染以修复内容。以前,如果一个元素是由第三方脚本或浏览器扩展插入的,它会触发一个不匹配的错误并进行客户端渲染。

在 React 19 中,`<head>``<body>` 中的意外标签将被跳过,避免了不匹配的错误。如果 React 需要由于无关的 hydration 不匹配而重新渲染整个文档,它将保留由第三方脚本和浏览器扩展插入的样式表。
在 React 19 中,`<head>``<body>` 中的意外标签将被跳过,避免了不匹配的错误。如果 React 需要由于无关的激活不匹配而重新渲染整个文档,它将保留由第三方脚本和浏览器扩展插入的样式表。

### 更好的错误报告 {/*error-handling*/}

Expand Down
55 changes: 35 additions & 20 deletions src/content/community/conferences.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,26 +10,6 @@ Do you know of a local React.js conference? Add it here! (Please keep the list c

## Upcoming Conferences {/*upcoming-conferences*/}

### React Nexus 2024 {/*react-nexus-2024*/}
July 04 & 05, 2024. Bangalore, India (In-person event)

[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### Chain React 2024 {/*chain-react-2024*/}
July 17-19, 2024. In-person in Portland, OR, USA

[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)

### The Geek Conf 2024 {/*the-geek-conf-2024*/}
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)

### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA

[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)

### React Universe Conf 2024 {/*react-universe-conf-2024*/}
September 5-6, 2024. Wrocław, Poland.

Expand All @@ -55,13 +35,48 @@ October 18, 2024. In-person in Brussels, Belgium (hybrid event)

[Website](https://www.react.brussels/) - [Twitter](https://x.com/BrusselsReact)

### React Advanced London 2024 {/*react-advanced-london-2024*/}
October 25 & 28, 2024. In-person in London, UK + online (hybrid event)

[Website](https://reactadvanced.com/) - [Twitter](https://x.com/reactadvanced)

### React Summit US 2024 {/*react-summit-us-2024*/}
November 19 & 22, 2024. In-person in New York, USA + online (hybrid event)

[Website](https://reactsummit.us/) - [Twitter](https://twitter.com/reactsummit) - [Videos](https://portal.gitnation.org/)

### React Africa 2024 {/*react-africa-2024*/}
November 29, 2024. In-person in Casablanca, Morocco (hybrid event)

[Website](https://react-africa.com/) - [Twitter](https://x.com/BeJS_)

### React Day Berlin 2024 {/*react-day-berlin-2024*/}
December 13 & 16, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://reactday.berlin/) - [Twitter](https://x.com/reactdayberlin)

## Past Conferences {/*past-conferences*/}

### React Rally 2024 🐙 {/*react-rally-2024*/}
August 12-13, 2024. Park City, UT, USA

[Website](https://reactrally.com) - [Twitter](https://twitter.com/ReactRally) - [YouTube](https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw)

### The Geek Conf 2024 {/*the-geek-conf-2024*/}
July 25, 2024. In-person in Berlin, Germany + remote (hybrid event)

[Website](https://thegeekconf.com) - [Twitter](https://twitter.com/thegeekconf)

### Chain React 2024 {/*chain-react-2024*/}
July 17-19, 2024. In-person in Portland, OR, USA

[Website](https://chainreactconf.com) - [Twitter](https://twitter.com/ChainReactConf)

### React Nexus 2024 {/*react-nexus-2024*/}
July 04 & 05, 2024. Bangalore, India (In-person event)

[Website](https://reactnexus.com/) - [Twitter](https://twitter.com/ReactNexus) - [Linkedin](https://www.linkedin.com/company/react-nexus) - [YouTube](https://www.youtube.com/reactify_in)

### React Summit 2024 {/*react-summit-2024*/}
June 14 & 18, 2024. In-person in Amsterdam, Netherlands + remote (hybrid event)

Expand Down
Loading

0 comments on commit a75dfd3

Please sign in to comment.