通俗来讲，就是 props 传递的数据只能由父组件流向子组件，子组件对接收到的 props 数据不可以直接修改 ！
但是可以由父组件传递 状态 的同时传递 修改状态的方法，然后由子组件调用该方法，达到修改 props 的目的，这也是父子组件传值一种通用的模式！
在React中，props（属性）是组件之间通信的一种方式，它遵循单向数据流的模式。这意味着数据（即props）只能从父组件传递到子组件，子组件不能直接修改接收到的props。这种设计有助于维护组件之间的清晰界限和数据流的可预测性，从而使得应用更易于理解和维护。下面是几个关键点：
-
父组件到子组件：父组件可以将其状态（state）或计算得到的数据通过props传递给其子组件。子组件通过这些props可以访问从父组件传递来的数据。
-
只读属性：子组件不应该直接修改接收到的props。如果需要根据父组件传来的props计算新数据，子组件应该使用自己的状态（state）或其他变量来处理。
-
数据更新：当父组件的状态发生变化时，相关的props也会更新，并传递给子组件。React会自动重新渲染那些受影响的子组件，以反映新的props值。
-
函数作为props：父组件可以将函数作为props传递给子组件，子组件可以调用这些函数以向父组件“回传”信息（比如更新父组件的状态）。这是在React中处理子组件要更新父组件状态的常用方法。
一、错误用法
在React中，“直接改”意味着子组件尝试修改接收到的props的值或其内部结构，而没有通过适当的React数据流（如状态提升或回调函数）来进行。这是React明确禁止的，因为它违反了单向数据流的原则，并可能导致应用程序的行为不可预测和难以维护。
// 父组件
class ParentComponent extends React.Component {state = {userInfo: {name: '张三',age: 30}};render() {return <ChildComponent userInfo={this.state.userInfo} />;}
}// 子组件
class ChildComponent extends React.Component {someMethod() {// 错误示范：直接修改propsthis.props.userInfo.name = '李四';}render() {return <div>{this.props.userInfo.name}</div>;}
}
在这个例子中，ChildComponent 的 someMethod 方法直接修改了 userInfo 对象的 name 属性。这是直接修改props的行为，违反了React的原则。尽管这种修改可能会导致界面更新显示新的名字，但它是不安全的，因为它没有遵循React的更新机制，可能会导致应用程序的状态不一致。
二、正确用法
如果需要修改props中的数据，子组件应该调用一个从父组件传递下来的函数，这个函数负责安全地更新父组件的状态：
// 父组件
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的发生。
