javascript - React - 受控组件有什么好处？

Question

假设我们有一个名为 MyChildComponent 的组件，它将用于显示数字列表，并且还能够通过在 MyChildComponent 中单击按钮将随机数添加到列表中。单击按钮时，只有 MyChildComponent 会重新渲染，因为只有 MyChildComponent 的状态会更新。

public class MyParentComponent extends React.Component {
    const numsInParent = [0,1,2];
    render() {
        return <MyChildComponent nums="numsInParent " />);
    }
}
public class MyChildComponent extends React.Component {
    const { nums } = this.props;
    state = { nums: this.props.nums };
    handleChange = ()=> {
        this.setState({ nums: {...nums, random()} });
    };
    render() {
       return (
           <button onClick="this.handleChange">Add<button>
           <ul>
                nums.map((num) =><li>{num}</li>)
           </ul>);
    }
}

然而，我经常被告知我们不应该像上面那样设计。我们应该让父组件将 nums 和一个函数传递给子组件 props，而不是直接在子组件内部实现实际方法，而是在父组件中完成component 和 value 应该通过子组件 props 来更新，也就是所谓的受控组件，比如

public class MyParentComponent extends React.Component {
    addNum() {
        numsInParent = {...numsInParent, random()};
    }
    render() {
        return <MyChildComponent nums="numsInParent " addNum="this.addNum" />);
    }
}
public class MyChildComponent extends React.Component {
    const { nums, addNum } = this.props;
    handleChange = ()=> {
        // child just call parent to do the real work
        this.addNum();
    };
    render() {
       return (
           <button onClick="this.handleChange">Add<button>
           <ul>
                nums.map((num) =><li>{num}</li>)
           </ul>);
    }
}

这样做，当按钮在子组件内单击时，会导致父组件和子组件以子组件 -> 父组件 -> 子组件的方式重新渲染，对吗？那么这个设计而不是第一个设计的好处是什么，它会不会对性能产生影响？我见过结构如下的示例项目

ComponentA(实际方法) -> ComponentB -> ComponentC -> ... ComponentX,

为了弄清楚 ComponentX 中的某些内容是如何发生变化的，我们需要一直走到 ComponentA 中声明的实际方法的位置，这是否也意味着当某些内容在 ComponentX 中触发时，所有来自 A、B 的组件, C 到 X 会重新渲染吗？值得吗？

Answer 1

关于在父级中拥有状态使其成为受控组件的声明并不是受控组件和非受控组件的含义。受控组件是让 React 在内部为其处理表单数据的组件，而非受控组件是将表单数据存储在 DOM 中的组件。因此，由于您将所有内容的数据存储在 React 的内部状态中，因此您总是在创建受控组件。

但是，要回答有关在何处存储该状态的问题，将状态存储在父级中仅在父级需要访问信息时才有用。基于 React 文档和 React 指南，始终使用尽可能少的状态，并始终将状态推到它需要的最低水平。

查看您的代码，有人告诉您您做错了的原因是因为您从父级传递了一个 prop，然后使用该 prop 来填充状态。这可以创建一个指向数组的指针，您在子项中更改的任何值都会更新父项的 Prop ，这将导致同步问题。由于您的 parent 不需要了解状态，因此无需将初始值传递给 child 。要修复您的代码，它应该看起来更像这样:

public class MyParentComponent extends React.Component {
    render() {
        return <MyChildComponent />);
    }
}

public class MyChildComponent extends React.Component {
    state = { nums: [0,1,2]};
    handleChange = ()=> {
        this.setState({ nums: [...nums, random()] });
    };
    render() {
       return (
           <button onClick="this.handleChange">Add<button>
           <ul>
                nums.map((num) =><li>{num}</li>)
           </ul>);
    }
}

父级需要了解其子级也需要了解的状态的唯一原因是父级是否需要访问该状态以及子级(某些情况下您可能希望基于状态， child 也需要根据相同的状态更改其功能)。

否则，你是对的， parent 和 child 都会重新渲染。对于父级，这是浪费的渲染，不需要完成，因为父级没有任何改变。只有 child 需要重新渲染。

这是一个更多关于优化的主题，仅在子级中具有状态比在父级中具有更好的性能优化。你会用眼睛注意到差异吗，不太可能。但是让状态处于正确的级别可以优化您的组件并提高它们的效率。