在 React 中，为了方便数据的管理和问题追踪，采用的是单向数据流的方式，数据的组织形式是树状的，由上至下单向流动。数据从父组件到子组件，子组件只能读取父组件传递过来的数据，不能修改。React 中的数据有两种，一种是组件自身的状态：state，另一种是由父组件传来的属性：props（property-属性）。熟练掌握这两种数据对象，是 React 的基本功之一。
state：正如名字所示，state代表着组件自身的状态，往往用来实现对行为的控制、数据的更新、界面的渲染，state只能够由组件本身修改，而且不能直接赋值，而是需要使用函数setState：this.setState({name: name}); 当组件的状态发生改变时，React 会自动完成相应 DOM的重新渲染，通过这种方式，我们原先对 DOM 的操作就变成了对数据（状态）的操作。
props：React 中的单向数据流指的就是从父组件到子组件的 props。props 是只读的，不可修改的，子组件若是想要修改 props 的内容，只能通过父组件内部的方法来实现。
props 用于定义外部接口，state 用于记录内部状态
props 的赋值在外部使用的父组件中，state 的赋值在于子组件内部
组件不应该改变 props 的值，而 state 存在的目的就是让组件来修改的
组件之间最简单的通信方式是父子组件之间的通信，有父->子和子->父两种。父->子非常简单，在父组件创建子组件的时候传入数据，然后子组件就能通过 props 读取了。
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {name: this.props.name};
}
render() {
return (
<div>
<h1>Hi, {this.props.name}</h1>
<h1>Hello, {this.state.name}</h1>
</div>
)
}
}
function App() {
return (
<div>
<Welcome name="mumu" />
</div>
);
}
而子->父就稍微麻烦一点了，子组件若是想要传递数据给父组件或者修改父组件中的数据，都只能通过调用父组件中的函数的方式实现。
//子组件
class Welcome extends React.Component {
constructor(props) {
super(props);
this.state = {name: this.props.name};
}
render() {
return (
<div>
//调用了父组件传来的方法
<h1 onClick={()=>{this.props.changeName('amumu')}}>Hi, {this.props.name}</h1>
<h1>Hello, {this.state.name}</h1>
</div>
)
}
}
//父组件
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: 'mumu'};
}
changeName = (name) => {
this.setState({name})
}
render() {
return (
<div>
//在创建子组件时传递方法
<Welcome name={this.state.name} changeName={this.changeName} />
<div>my name is {this.state.name}</div>
</div>
);
}
}
再稍微复杂一点的还有兄弟组件之间的通信，这时我们需要用到一个技巧来实现：状态提升。其实说白了就是先把需要的数据传递给子组件们所共同的父组件，再由父组件传递给需要数据的子组件。
class Name extends React.Component {
constructor(props) {
super(props);
this.state = {name: 'mumu'};
}
render() {
return (
<div>
<h1 onClick={()=>{this.props.changeName(this.state.name)}}>Hi,my name is {this.state.name}</h1>
</div>
)
}
}
class Welcome extends React.Component {
render() {
return (
<div>
<h1>Hello, {this.props.name}</h1>
</div>
)
}
}
class App extends React.Component {
constructor(props) {
super(props);
this.state = {name: '?'};
}
changeName = (name) => {
this.setState({name})
}
render() {
return (
<div>
<Name changeName={this.changeName} />
<Welcome name={this.state.name} />
</div>
);
}
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
通过明确的父子组件之间的数据关系，虽然在使用的时候有点麻烦，但是很方便数据的管理和后期问题的排查，不过，随着项目的复杂化，当组件之间的关系变得十分复杂时，再通过这种方式传数据将会变得十分繁琐麻烦，所以我们还需要学会使用 context、Redux 等集中管理数据的方式。
另外，如果你有兴趣，或者是有问题想要与我探讨，欢迎来访问我的博客：https:mu-mu.cn/blog
