跳到主要内容

state

2024年03月07日
柏拉文
越努力，越幸运

一、认识​

state 与 props 是 React 组件中最重要的概念。如果顶层组件初始化 props，那么 React 会向下遍历整棵组件树，重新尝试渲染所有相关的子组件。而 state 关心每个组件自己内部的状态，这些状态只能在组件内改变。把组件看成一个函数，那么它接受了 props 作为参数，内部由 state 作为函数的内部参数，返回一个 Virtual DOM 的实现。

二、语法​

三、用法​

3.1 合理使用 state​

React 并不像 Vue 那样响应式数据流。 在 Vue 中有专门的 dep 做依赖收集，可以自动收集字符串模版的依赖项，只要没有引用的 data 数据， 通过 this.aaa = bbb ，在 Vue 中是不会更新渲染的。但是在 React 中只要触发 setState 或 useState ，如果没有渲染控制的情况下，组件就会渲染，暴露一个问题就是，如果视图更新不依赖于当前 state ，那么这次渲染也就没有意义。所以对于视图不依赖的状态，就可以考虑不放在 state 中。

那么, 如何管理需要记录变化,但是又不需要渲染的数据呢?

  • 对于类组件: 可以直接绑定在 this 上

  • 对于函数组件: 可以通过 useRef 来保存

    import React, { useRef } from "react";
    import ReactDOM from "react-dom";

    function App() {
        const dom = useRef(null);
        const scrollTop = useRef(0);

        const handleScroll = () => {
            scrollTop.current = dom.current.scrollTop;
            console.log(scrollTop.current);
        };


        return (
            <div
            style={{ height: "200px", overflowY: "auto" }}
            ref={dom}
            onScroll={handleScroll}
            >
                <div style={{ height: "400px" }}></div>
            </div>
        );
    }

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

四、问题​

4.1 类组件如何限制 state 带来的更新作用?​

  1. pureComponent 可以对 state 和 props 进行浅比较，如果没有发生变化，那么组件不更新。

  2. shouldComponentUpdate 生命周期可以通过判断前后 state 变化来决定组件需不需要更新，需要更新返回true，否则返回false

4.2 state 和 props 有什么区别?​

一个组件的更新和渲染由组件自身状态和组件接收的外部传入的状态来决定, 组件自身的状态就是 state, 组件接收的外部传入的状态就是 props。组件自身状态可以通过 this.setState() 或者 useState dispatch 来改变, 从而达到更新组件自身状态, 并且触发重新渲染。React 具有单向数据流动的特性, 所以 props 是不可变的, 如果改变 props, 只能通过组件接收新的 props 来重新渲染子组件。