🔥 通过 10 条推文学习 React（带 hooks）

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

奖金

这最初是在推特上发布的：https://twitter.com/chrisachard/status/1175022111758442497

🔥 通过 10 条推文学习 React（带 hooks）👇

1.

React 的工作原理：

• 您在网页上显示数据
• 用户与其交互
• 现在数据发生了变化……
• ...并且您希望网页看起来有所不同

React 帮你搞定！💯

2.

在 React 中思考：

将您的 UI 分解为自定义组件。

每个组件负责根据可用的外部和内部数据显示自己。

构建这些组件的树以获得完整的 UI

3.

组件是返回 JSX 的函数

JSX 看起来像 HTML，但实际上是 JavaScript

在 JSX 内部，使用花括号包含 JS

很多人看到 HTML 和 JS 混合在一起时会觉得“恶心！”，但 JSX 实际上是 React 的一大亮点🦄

4.

定义函数组件后，可以在另一个组件中使用它 - 它是一个“自定义组件”

使用此方法构建定义整个 UI 的组件“树”

5.

从组件外部传入的数据称为“props”（属性）

可以通过 JSX 属性从父级传递给子级

Props 作为函数的第一个参数进入函数组件。

6.

内部的、可改变的数据称为“状态”。

useState状态由返回数据的函数和更改该数据的函数（在数组中）定义。

切勿直接设置状态变量 - 始终使用该函数（因为下一点👇）

7.

当状态或属性发生变化时，你的组件会自动更新🎉

✨ 这就是 React 的魔力！✨

你几乎不需要亲自进入 DOM

（如果您认为您可以做到 - 您可能正在尝试以“困难的方式”去做）

8.

通过循环遍历数据数组来列出事物列表map

从每次循环迭代中返回一个元素

key为列表中的每个元素提供唯一的值，以确保最佳性能

9.

两种内置的组件样式设置方式：

1. 使用 设置类className，并使用常规 CSS 文件

2. style={{ }}使用驼峰式键设置内联样式
   👉注意双花括号

10.

执行异步函数和副作用useEffect（需要回调）

第二个参数是依赖项数组。

包括 useEffect 使用的可能发生变化的任何变量，如果没有，则包含一个空数组。

奖金

就是这样！React 的大部分功能都只是这 10 点的特例。

现在：想看👀这个速成课程的截屏视频吗？你的愿望实现了！🎉

查看以更好地理解每一点👇

https://www.reactscreencasts.com/crash_courses/react_with_hooks

喜欢这个速成课程吗？

我在推特上发布了更多内容：@chrisachard
或者订阅时事通讯！https://chrisachard.com/newsletter/

感谢阅读！