从零一起学react(4)---组件的props和state

前言

react组件具有props成员和state成员，这两个成员都是object类型，而props和state的主要区别是：props不可变，而state可以根据和用户的互交来改变。

props

1.获取props

先看一段代码。

class Hello extends React.Component {
  render() {
    return (
Hello {this.props.mes}
);
  }
}
ReactDOM.render(
  "world" />,
  document.getElementById('test')
);

这段代码中创建组件在上一篇文章中讲过，不同的地方是我们在ReactDOM.render()中给了组件Hello一个属性 mes=”Hello world” ,然后在创建组件的代码中使用{this.props.mes}来获取该属性的值，this.props.mes就是这个组件的props成员的mes属性。这样浏览器中显示出Hello world，说明获取到了mes属性的值。

2.默认props

我们可以用 Hello.defaultProps 给props属性设置一个默认值，这样我们在使用组件但没有给出属性值时，会显示默认值，例如。

class Hello extends React.Component {
  render() {
    return 
Hello {this.props.name}
;
  }
}
Hello.defaultProps = { name: 'buppt'};
ReactDOM.render(
  ,
  document.getElementById('test')
);

这样在没有给name属性时，会默认显示’Hello buppt’，如果给出name属性如 < Hello name=’world’/> 将会显示 ‘Hello world’。

上面代码是在class外部定义的属性，在组件内部定义的写法如下。

class Hello extends React.Component {
  static defaultProps = {
    name: 'buppt'
  }
  render() {
    return 
Hello {this.props.name}
;
  }
}

组件内定义在create-react-app和react native中都是可以的，但是我们用babel设置es6的转码方式，运行会报错，因为定义静态属性不属于es6，而在es7的草案中。ES6的class中只有静态方法，没有静态属性。这里我们知道可以这样定义就好啦。

3.props属性验证

我们可以用 propTypes 给props属性设置一个类型限定，例如。

class Hello extends React.Component {
  //组件内设置如下
  //static propTypes = { name: React.PropTypes.string.isRequired,}
  render() {
    return 
Hello {this.props.name}
;
  }
}
//组件外设置如下
//Hello.propTypes = { name: React.PropTypes.string.isRequired};
//var myName=123;
var myName="buppt";
ReactDOM.render(
  ,
  document.getElementById('test')
);

本来我还在想为什么按照上面的写法会出错，原来官网都有说明：

注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。

所以更详细的props属性验证说明可以看《从零一起学react(6)》。

4.this.props.children

这里先说明一下，组件使用时不一定要写成<组件名 />这样，还可以写成<组件名><组件名/>。
每一个组件的props都有一个children属性，这个属性将返回所有在<组件名><组件名/>之间的内容。例如：

class Hello extends React.Component {
  render() {
    return 
Hello {this.props.children}
;
  }
}

ReactDOM.render(
  
    I am buppt.
    

    Nice to meet you!
  ,
  document.getElementById('test')
);

将显示出’Hello I am buppt. Nice to meet you!’。

state

1.获取state

和props不同，state不是从<组件名/>中传进来的，而是组件自己的状态。例如：

class Hello extends React.Component {
  constructor(props){
    super(props);
    this.state = { mood: 'happy' };
  }
  render() {
    return 
I am {this.state.mood}
;
  }
}

ReactDOM.render(
  ,
  document.getElementById('test')
);

浏览器将会显示’I am happy’，至于为什么要先调用super(props)，用百度上说：

调用super的原因：在ES6中，在子类的constructor中必须先调用super才能引用this。
super(props)的目的：在constructor中可以使用this.props。
根本原因是constructor会覆盖父类的constructor，导致你父类构造函数没执行，所以手动执行下。

2.使用setState更新state

使用this.setState()可以更新(改变)this.state中的属性值。先贴一段代码。

class Hello extends React.Component {
  constructor(props){
    super(props);
    this.state = { color: 'green' };
    this.changeColor = this.changeColor.bind(this);
  } 
  changeColor() {
    this.setState({ color: 'yellow' });
  } 
  render() {
    return (
      <div style={{background: this.state.color}}>
        

          Change my color
        
        this.changeColor}>Change color
      div>
    );
  }
}
ReactDOM.render(, document.getElementById('test'));

如果尝试运行一下这段代码，你就知道这段代码的作用就是，点击按钮，可以将div的背景颜色从绿色改为黄色，这说明点击按钮，改变了this.state.color的值。

其中用到了.bind(this)，想具体了解的可以看一下官方文档，以后我可能会具体写一下，这个bind的作用简言之就是使changeColor()无论怎样调用都有相同的this。

这篇文章就到这里把～大家可以再敲一下下面这个代码具体感受一下。

class Hello extends React.Component {
  constructor(props){
    super(props);
    this.state = { color: 'green' };
    this.changeColor = this.changeColor.bind(this);
  }
  changeColor() {
    const newColor = this.state.color == 'green' ? 'yellow' : 'green';
    this.setState({ color: newColor });
  }
  render() {
    return (
      <div style={{background: this.state.color}}>
        

          Change my color
        
        this.changeColor}>Change color
      div>
    );
  }
}
ReactDOM.render(, document.getElementById('test'));