React.js 入门指南

虚拟 DOM

JSX

成分

道具

状态

本文将探讨 React 的一些基本主题：

• 虚拟 DOM
• JSX
• 成分
• 道具
• 状态

React是一个用于构建用户界面的 JavaScript 库。换句话说，它负责我们 Web 应用程序的视图层。

声明式

React 遵循声明式编程风格。它的意思很简单，就是“我们想要什么” ，这与命令式编程“我们该怎么做？”截然不同。让我进一步解释一下。假设你的目标是去医院。现在，有两种方法可以实现这个目标。

陈述句：你只想到达医院。

指令：你找到路线，搭乘出租车，最终到达目的地。

基于组件的

这是 React 最棒的特性之一。目前，你只需要记住 React 中的组件本质上就是 JavaScript 函数，定义组件有两种方式。我们稍后会详细介绍组件。

虚拟 DOM

你可能听说过 DOM，对吧？虚拟 DOM 与实际的 DOM 非常相似。你可能还记得，在 JavaScript 中，每当页面内容发生变化时，DOM 树中的节点都会更新，页面也会随之改变。

虚拟 DOM 与实际 DOM 保持同步。React 的工作原理是，每当我们更新（改变）应用程序的状态时，它都会将之前的状态与更新后的状态进行比较（使用 diff 算法），进而创建一个更新后的虚拟 DOM，最后将更改应用到实际 DOM。那么问题来了，“为什么 React 不能直接更新实际 DOM 呢？” 如果我们频繁地更改状态，就必须每次都重新渲染元素，这将是一个非常耗费资源的任务。虚拟 DOM只更新最近发生的更改，因此效率更高。

您可以在官方文档中了解更多相关信息。

图片由 cronJ.com 提供

JSX

JSX 看起来和 HTML 很像，但实际上并非如此。它是用于“创建” React 元素（也就是用户界面）的语法标记。

function App() {
  return(
    <h1 className="header">Hello World</h1> // JSX
  )
}

在底层，如果你尝试打开Babel，React 会这样看待上面的代码：

React.createElement("h1", {className: "header"}, "Hello World");

你可以用多种方式来设置 React 组件的样式。这里有一篇关于样式设置的好文章。

成分

组件是一个 JavaScript 函数或类，它返回一个 React 元素，并描述用户界面的外观。让我们通过一个例子来理解它。

功能组件

function App() {
    return(
        <h1>Hello World<h1>
    )
}

Output: Hello World

在函数式组件中不能使用类似 `setState()` 的方法，这就是为什么它们被称为无状态组件，因为函数式组件会根据我们提供的输入返回 UI。另一方面，如果你看一下类组件，你会发现它有构造函数、状态，而且我们甚至可以在之后修改状态。所以，它某种程度上来说是一种有状态组件。

基于类的组件

class App extends React.Component {
    render() {
        <h1>Hello World<h1>
    }
}

Output: Hello World

对于基于类的组件，render()方法是必不可少的。

道具

props 用于将数据从一个组件传递到另一个组件。你可以说 props 类似于数据属性。让我们来看看为什么！

function Name(props) {
    return(
        <h1>Hello, {props.name}</h1>
    )
}

function App() {
    return(
        <Name name="Rick"/>
    )
}

ReactDOM.render(<App />, document.getElementById("root"))


Output: Hello, Rick

这里有两个组件，分别是Name 组件和App组件。React 会调用 Name 组件，并将我们在 App 组件中定义的 props 参数 `{name: "Rick"}` 传递给它。记住，props 是以对象形式存在的。简单来说，Name 组件会接收到对象 props 中的 `name` 键，从而将元素渲染到屏幕上。

文档中写道：“所有 React 组件在处理 props 时都必须像纯函数一样。” props 是只读的，是不可变的，并且总是从组件外部传递。函数会返回我们想要的结果。解决方案是定义一个在处理动态数据时非常有用的东西。没错，你猜对了，它叫做State。

状态

状态是 React 中最重要的概念之一。几乎所有功能都依赖于状态。状态的每一次改变都会影响视图的改变。
这是一个简单的计数器示例。当按钮被点击时，计数器的值应该加一。

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      count: 0
    }
    this.handleClick = this.handleClick.bind(this)
  }

  handleClick() {
    this.setState((prevState) => {
      return {
        count: prevState.count + 1
      }
    })

  }

  render() {
    return(
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    )
  }
}

我们在这里想要做的是更新计数器，也就是将之前的状态加一。我们不能直接在这里说：

this.state.count + 1

为了设置状态，React 使用`setState()`方法。需要注意的是，`setState` 是异步的。为了避免异步操作，可以使用回调函数。在上面的代码片段中，我们在设置状态时使用了回调函数，并将 `prevState` 作为参数传递。因此，每次点击按钮时，我们都会返回之前的状态并将其值加一。

如果你想成为一名优秀的 React 开发者，不妨看看Toptal的这篇文章。它深入浅出地讲解了高阶组件、React 中的函数式编程、状态管理等诸多主题。千万不要错过！

感谢阅读本文。请在Twitter上关注我，获取更多最新消息。