React小记——如何理解 props 单向数据流？

通俗来讲，就是 props 传递的数据只能由父组件流向子组件，子组件对接收到的 props 数据不可以直接修改 ！

但是可以由父组件传递状态的同时传递 修改状态的方法，然后由子组件调用该方法，达到修改 props 的目的，这也是父子组件传值一种通用的模式！

在React中，props（属性）是组件之间通信的一种方式，它遵循单向数据流的模式。这意味着数据（即props）只能从父组件传递到子组件，子组件不能直接修改接收到的props。这种设计有助于维护组件之间的清晰界限和数据流的可预测性，从而使得应用更易于理解和维护。下面是几个关键点：

父组件到子组件：父组件可以将其状态（state）或计算得到的数据通过props传递给其子组件。子组件通过这些props可以访问从父组件传递来的数据。
只读属性：子组件不应该直接修改接收到的props。如果需要根据父组件传来的props计算新数据，子组件应该使用自己的状态（state）或其他变量来处理。
数据更新：当父组件的状态发生变化时，相关的props也会更新，并传递给子组件。React会自动重新渲染那些受影响的子组件，以反映新的props值。
函数作为props：父组件可以将函数作为props传递给子组件，子组件可以调用这些函数以向父组件"回传"信息（比如更新父组件的状态）。这是在React中处理子组件要更新父组件状态的常用方法。

一、错误用法

在React中，"直接改"意味着子组件尝试修改接收到的props的值或其内部结构，而没有通过适当的React数据流（如状态提升或回调函数）来进行。这是React明确禁止的，因为它违反了单向数据流的原则，并可能导致应用程序的行为不可预测和难以维护。

javascript 复制代码

// 父组件
class ParentComponent extends React.Component {
  state = {
    userInfo: {
      name: '张三',
      age: 30
    }
  };

  render() {
    return <ChildComponent userInfo={this.state.userInfo} />;
  }
}

// 子组件
class ChildComponent extends React.Component {
  someMethod() {
    // 错误示范：直接修改props
    this.props.userInfo.name = '李四';
  }

  render() {
    return <div>{this.props.userInfo.name}</div>;
  }
}

在这个例子中，ChildComponent 的 someMethod 方法直接修改了 userInfo 对象的 name 属性。这是直接修改props的行为，违反了React的原则。尽管这种修改可能会导致界面更新显示新的名字，但它是不安全的，因为它没有遵循React的更新机制，可能会导致应用程序的状态不一致。

二、正确用法

如果需要修改props中的数据，子组件应该调用一个从父组件传递下来的函数，这个函数负责安全地更新父组件的状态：

javascript 复制代码

// 父组件
class ParentComponent extends React.Component {
  state = {
    userInfo: {
      name: '张三',
      age: 30
    }
  };

  updateName = (newName) => {
    this.setState({ userInfo: { ...this.state.userInfo, name: newName } });
  };

  render() {
    return <ChildComponent userInfo={this.state.userInfo} updateName={this.updateName} />;
  }
}

// 子组件
class ChildComponent extends React.Component {
  someMethod = () => {
    // 正确的做法：通过父组件提供的方法来更新
    this.props.updateName('李四');
  };

  render() {
    return (
      <div>
        {this.props.userInfo.name}
        <button onClick={this.someMethod}>修改名字</button>
      </div>
    );
  }
}

在这种改进的模式中，所有的状态更新都是通过父组件控制的，符合React的单向数据流原则。这种方式不仅使得数据流更加清晰可追踪，还确保了组件之间的良好隔离，减少了bug的发生。