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
评论