React 回忆录(四)React 中的状态管理
Hi 各位,欢迎来到 React 回忆录!?? 在上一章中,我介绍了使用 React 渲染界面元素的方法,以及在这个过程中蕴含的“组件化”想想。在本章中,我们将把目光聚焦于 React 组件内部的状态管理,去认识或重新思考以下三个核心概念:
让我们开始吧! ?? 01. React 中的数据站在“组件”的角度上,React 把应用中流动的数据分为两种类型:
进一步说,
你可以通过组件上的 function Parent(props) { return <Child name={"Tom"} /> } function Child(props) { return <span>(props.name)</span> } 02. 函数组件我们之前提到过,React 使用组件渲染视图提升性能,而组件即是一个函数,可以用一个公式来简洁的表示其功用: 话说回来,对于 React 组件而言,最简单的一种形式莫过于函数组件了,它充分展现了 React 的哲学,一次只做一件事,组件化和数据驱动UI。 函数组件又称为“无状态组件”,“受控组件”或“木偶组件”,因为函数组件只负责接收 这是因为函数组件是非常直观的,它接收属性返回元素,内部逻辑清晰明确,而且更重要的是,函数组件内没有
03. 类组件和函数组件相对应的,便是“类组件”了,类似的,它也被称为“有状态组件”,“非受控组件”和“容器组件”。这里需要注意,虽然我们按照代码的形式为两种类型的组件命名,但这并不严谨,因为在 JavaScript 中,“类”也是函数。 不同于函数组件,类组件拥有着可以更改的内部数据 -- 由于 React 把变化的数据封装在组件内部,并坚持单向数据流的原则。我们有了高度抽象的 UI 组件,并封装复杂的业务逻辑。这使得我们可以通过构建,组合一系列小组件开发出大型应用。 那么应该如何向类组件添加 import React from "react" class Parent extends React.Component { state = { name: "Eliot",} render() { return <p>{this.state.name}</p> } } React 使我们迫使大脑关注两个重要的部分:
通过让组件管理自己的状态,任何时候状态的变更都会令 React 自动更新相应的页面部分。这便是使用 React 构建组件的主要优势之一:当页面需要重新渲染时,我们仅仅需要思考的是如何更改状态。我们不必跟踪页面的哪些部分需要更改,不需要决定如何有效的重新呈现页面,React 自会比较先前的输出和新的输出,决定什么应该发生改变,并为我们做出决定。而这个确定之前改变了什么和现在应该新输出什么的过程有一个专门的名词,叫做 04. 修改 state你应该还记得类组件与函数组件最大的不同在于类组件自身拥有可以改变内部数据的能力。那么如何行使这一能力呢?和直觉不同,要做到这一点,你需要使用 React 提供的专门的 API: 你有两种方式使用该 API:
让我们先来看看第一种: this.setState({ name: "Tom" }) React 会自动合并对 this.setState((prevState) => ({ name: "mr." + prevState.name })) 讲到这里你可能会感到奇怪,只是更新
如果你对 React 有一定研究,你可能会质疑我以上所罗列的两点并不精确,的确如此,小小的 不过幸好,这些略显古怪的状态早有前人为我们做了详尽的解释,如果你感兴趣,请点击下方链接查询更多的信息:
05. 控制组件当你在 Web 应用中使用表单时,这个表单的数据被存储于相应的 DOM 节点内部,但正如我们之前提到的,React 的整个关键点就在于如何高效的管理应用内的状态。所以虽然表单的数据被存储于 DOM 中,React 依然可以对它进行状态管理。 而管理的方式即是使用“控制组件”。简单而言,“控制组件”会渲染出一个表单,但是将表单所需的所有真实数据作为 之所以被称为“控制组件”的原因也即在于此,“控制组件”控制着组件内的表单数据,因此,唯一更新表单数据的方式就是更新组件内部对应的 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} /> } } 可以看到,我们使用 06. 小结这一章我们介绍了 React 的两种数据形式: PS:??如果你对该专题感兴趣,别忘了订阅本专栏,确保及时收到更新通知。记得点击下方??的各个按钮,让我知道你认可我的付出,这是激励我持续产出的动力和源泉 ??。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |