React 超短入门教程

Chris Achard 原作,授权 New Frontend 翻译。

React 如何工作:

  • 在网页上显示内容
  • 用户发生交互
  • 导致数据变动……
  • ……网页上的内容应该改变

React 能帮你完成这些!💯

定义组件后自动完成

以 React 的方式思考:

将用户界面拆分成自定义组件。

每个组件负责基于外部内部数据自行展示内容。

构建组件树表示整个界面。

Todo 界面

组件是返回 JSX 的函数。

JSX 看起来像 HTML,但其实是 JavaScript。

在 JSX 中,用花括号包围 JS。

许多人看到 HTML 混合 JS 就恶心得想吐,但 JSX 却是 React 的一大闪光点 🦄

JSX 组件

可以在其他组件中使用已定义的函数组件(自定义组件)。

如此便可构建定义整个界面的组件「树」。

Greeting 组件的声明和使用

来自组件外部的数据称为 props (属性)。

可以通过 JSX 标签属性设置子组件的属性。

props 是函数组件的第一个参数。

Greeting 组件的 props

内部的可变数据称为「状态」。

状态可以通过 useState 函数定义,该函数会返回一个数组,包括数据和修改数据的函数。

永远不要直接设置状态变量——总是使用相应函数进行修改(原因参见下一段 👇)

useState 实现计数器

状态或属性改变时,组件会自动更新 🎉

✨这正是 React 的神奇之处!✨

你基本上永远不需要自行操作 DOM。

(如果你发现需要自行操作 DOM 的话,多半你绕了弯路。)

自动更新的计数器

通过 map 遍历数据数组来创建列表。

每次迭代返回一元素。

给列表中的每个元素提供一个独立的「键」(key),以保证性能。

创建列表

给组件添加样式的两种内置方式:

  1. 给类设置 className,然后照常使用 CSS 文件。
  2. 通过 style={{}} 设置内嵌样式,键名采用驼峰命名(👉注意使用两层花括号)

常规样式表和内嵌样式

useEffect 中应用异步函数和副作用(useEffect 接受一个回调函数作为参数)。

useEffect 接受的第二个参数是依赖数组。

依赖数组包括 useEffect 用到的任何可能变动的变量,如果没有这样的变量,那就传入一个空数组。

useEffect 示例

好了,讲完了。大部分 React 项目都可以看成以上十条的特例。

👀更习惯看视频?满足你的愿望🎉

观看下面一系列视频来加深对以上十条的理解👇

React Crash Course with hooks

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

题图:Ray Hennessy

最新文章

评论

正在加载评论