React 回忆录（四）React 中的状况治理

2023年10月6日 226次阅读 来源: libinfs

Hi 列位，迎接来到 React 回忆录！👋 在上一章中，我引见了运用 React 衬着界面元素的要领，以及在这个历程当中包含的“组件化”想一想。在本章中，我们将把眼光聚焦于 React 组件内部的状况治理，去熟悉或从新思索以下三个中心观点：

  1. props 和 state
  2. 函数组件
  3. 类组件

让我们最先吧！ 🙌

01. React 中的数据

站在“组件”的角度上，React 把运用中活动的数据分为两种范例：

  1. 不可变动内容，但能够单向跨组件通报的 props；
  2. 能够变动内容，但不能跨组件通报的 state；

进一步说，props 和 state 的区分在于，props 是外部的，而且被任何衬着这个组件的代码所掌握。而 state 则是内部的，而且被组件本身所掌握。

非计算机专业的初学者常常疑心
props 和
state 在称号与寄义上的关联，实在大可没必要在乎，他们本质上只是
数据的别称，只是在 React 中，它们被各自给予了特别的限定或才能。

你能够经由历程组件上的 props 属性，像在 HTML 中通报属性一样，将你想要通报的任何数据通报给子组件，一切的属性都邑被存储在子组件（类组件）的 this.props 对象中。

function Parent(props) {
    return <Child name={"Tom"} />
}

function Child(props) {
    return <span>(props.name)</span>
}

02. 函数组件

我们之前提到过，React 运用组件衬着视图提拔机能，而组件等于一个函数，能够用一个公式来简约的示意其服从：f(数据) => UI。到这里我想你应当注重到了，为何我们说 React 并非一个大型的 MVC （或 MVVM）框架，因为 React 只担任视图层（View）的衬着，其他的事变将由 React 生态中的其他东西来完成。

话说回来，关于 React 组件而言，最简朴的一种情势莫过于函数组件了，它充足展示了 React 的哲学，一次只做一件事，组件化和数据驱动UI。

函数组件又称为“无状况组件”，“受控组件”或“木偶组件”，因为函数组件只担任吸收 props 并返回 UI，它本身并不能具有可转变的数据，在实在的 React 运用开辟场景下，我们常常只管的运用函数组件，将全部运用的 UI 拆分红只管小的视觉单位。

这是因为函数组件是异常直观的，它吸收属性返回元素，内部逻辑清晰明确，而且更重要的是，函数组件内没有 this 症结字，因而你永久没必要忧郁烦人的“this上下文题目”。

记着：假如你的组件不须要追踪内部状况，只管运用函数组件。

03. 类组件

和函数组件相对应的，就是“类组件”了，相似的，它也被称为“有状况组件”，“非受控组件”和“容器组件”。这里须要注重，虽然我们根据代码的情势为两种范例的组件定名，但这并不严谨，因为在 JavaScript 中，“类”也是函数。

差别于函数组件，类组件具有着能够变动的内部数据 — state。它终究影响着页面的衬着状况，而且 state 能够被组件在任什么时刻刻在内部修正。一般的时刻时用户与界面发作交互的时刻。

因为 React 把变化的数据封装在组件内部，并对峙单向数据流的准绳。我们有了高度笼统的 UI 组件，并封装庞杂的营业逻辑。这使得我们能够经由历程构建，组合一系列小组件开辟出大型运用。

那末应当怎样向类组件增加 state 呢？很简朴，我们所要做的只是在类组件内部增加一个 state 属性，state 属性是一个对象。这个对象代表了组件的状况，对象的每个属性名都代表组件的一个特定的状况，下面是详细的代码：

import React from "react"

class Parent extends React.Component {
    state = {
        name: "Eliot",
    }
    
    render() {
        return <p>{this.state.name}</p>
    }
}

React 使我们迫使大脑关注两个重要的部份：

  1. 组件看起来是什么样？
  2. 组件当前的状况是什么？

经由历程让组件治理本身的状况，任什么时刻候状况的变动都邑令 React 自动更新相应的页面部份。这就是运用 React 构建组件的重要上风之一：当页面须要从新衬着时，我们仅仅须要思索的是怎样变动状况。我们没必要跟踪页面的哪些部份须要变动，不须要决议怎样有用的从新显现页面，React 自会比较先前的输出和新的输出，决议什么应当发作转变，并为我们做出决议。而这个肯定之前转变了什么和如今应当新输出什么的历程有一个特地的名词，叫做 Reconciliation。

04. 修正 state

你应当还记得类组件与函数组件最大的差别在于类组件本身具有能够转变内部数据的才能。那末怎样利用这一才能呢？和直觉差别，要做到这一点，你须要运用 React 供应的特地的 API：this.setState()。

你有两种体式格局运用该 API：

  1. 设置对象参数；
  2. 设置函数参数；

让我们先来看看第一种：

this.setState({
    name: "Tom"
})

React 会自动兼并对 state 的转变。而偶然，你的组件须要一个新的 state ，而这个 state 的变化又依赖于旧的 state 值，每当这类时刻，你就该运用第二种 API 挪用体式格局：

this.setState((prevState) => ({
    name: "mr." + prevState.name
}))

讲到这里你可能会觉得新鲜，只是更新 state 罢了，为何还须要挪用一个特地的 API？我们直接修正之前定义的 state 对象不就好了吗？之所以如许设想的缘由是，组件内 state 的变化不仅仅是对象属性值发作变化那末简朴，它还须要驱动全部 UI 举行从新衬着，因而 this.setState() 这个 API 被挪用时实际上做了两件事：

  1. 修正 state 对象；
  2. 驱动组件从新衬着；

假如你对 React 有肯定研讨，你可能会质疑我以上所排列的两点并不准确，确实云云，小小的 this.setState() API 实在内部另有许多细节值得注重，比方，当挪用 this.setState() 时并不会马上转变 state 的值，也固然不会马上从新衬着组件。比方，当以对象为参数挪用 this.setState() API 时，只管内部反复为数据赋值，终究的数据也只保存末了一次变动的效果。

不过幸亏，这些略显离奇的状况早有前工资我们做了详实的诠释，假如你感兴趣，请点击下方链接查询更多的信息：

05. 掌握组件

当你在 Web 运用中运用表单时，这个表单的数据被存储于相应的 DOM 节点内部，但正如我们之前提到的，React 的全部症结点就在于怎样高效的治理运用内的状况。所以虽然表单的数据被存储于 DOM 中，React 依旧能够对它举行状况治理。

而治理的体式格局等于运用“掌握组件”。简朴而言，“掌握组件”会衬着出一个表单，然则将表单所需的一切实在数据作为 state 存储于组件内部，而不是 DOM 中。

之所以被称为“掌握组件”的缘由也即在于此，“掌握组件”掌握着组件内的表单数据，因而，唯一更新表单数据的体式格局就是更新组件内部对应的 state 值。

import React as "react"

class Input extends React.Component {
    state = {
        value: "enter something...",
    }
    
    handleClick: (e) => {
        this.setState({value: e.target.value})
    }
    
    render() {
        <input value={this.state.value} onKeyup={this.handleClick} />
    }
}

能够看到，我们运用 handleClick 要领响运用户每一次键盘敲击以立即更新表单状况，如许做不仅自然的支撑了立即的输入考证，还许可你有条件的制止或点亮表单按钮。

06. 小结

这一章我们引见了 React 的两种数据情势：state 和 props，而且引见了 React 组件的两种情势：函数组件与类组件，愿望分外有所收成，假如有任何题目或发起，也迎接列位在批评区内留言，下一章见 🙌

PS：🔊假如你对该专题感兴趣，别忘了定阅本专栏，确保实时收到更新关照。记得点击下方👇的各个按钮，让我晓得你承认我的支付，这是鼓励我延续产出的动力和源泉 😎。

    原文作者：libinfs
    原文地址: https://segmentfault.com/a/1190000015699401
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞