React入门（四）：state & props

在 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

React入门（四）：state & props

猜你喜欢