Chris Achard 原作，授权 New Frontend 翻译。
React 如何工作：
- 在网页上显示内容
- 用户发生交互
- 导致数据变动……
- ……网页上的内容应该改变
React 能帮你完成这些！💯
以 React 的方式思考：
将用户界面拆分成自定义组件。
每个组件负责基于外部和内部数据自行展示内容。
构建组件树表示整个界面。
组件是返回 JSX 的函数。
JSX 看起来像 HTML，但其实是 JavaScript。
在 JSX 中，用花括号包围 JS。
许多人看到 HTML 混合 JS 就恶心得想吐，但 JSX 却是 React 的一大闪光点 🦄
可以在其他组件中使用已定义的函数组件（自定义组件）。
如此便可构建定义整个界面的组件「树」。
来自组件外部的数据称为 props （属性）。
可以通过 JSX 标签属性设置子组件的属性。
props 是函数组件的第一个参数。
内部的可变数据称为「状态」。
状态可以通过 useState 函数定义，该函数会返回一个数组，包括数据和修改数据的函数。
永远不要直接设置状态变量——总是使用相应函数进行修改（原因参见下一段 👇）
状态或属性改变时，组件会自动更新 🎉
✨这正是 React 的神奇之处！✨
你基本上永远不需要自行操作 DOM。
（如果你发现需要自行操作 DOM 的话，多半你绕了弯路。）
通过 map 遍历数据数组来创建列表。
每次迭代返回一元素。
给列表中的每个元素提供一个独立的「键」（key），以保证性能。
给组件添加样式的两种内置方式：
- 给类设置
className，然后照常使用 CSS 文件。 - 通过
style={{}}设置内嵌样式，键名采用驼峰命名（👉注意使用两层花括号）
在 useEffect 中应用异步函数和副作用（useEffect 接受一个回调函数作为参数）。
useEffect 接受的第二个参数是依赖数组。
依赖数组包括 useEffect 用到的任何可能变动的变量，如果没有这样的变量，那就传入一个空数组。
好了，讲完了。大部分 React 项目都可以看成以上十条的特例。
👀更习惯看视频？满足你的愿望🎉
观看下面一系列视频来加深对以上十条的理解👇
https://www.reactscreencasts.com/crash_courses/react_with_hooks
题图：Ray Hennessy
评论