react学习(二)之通信篇

2018-06-24 02:18:40来源：未知阅读 ()

react性能提升原理：虚拟DOM

react把真是的DOM tree，转化成virtual DOM，每次数据更新后，重新计算virtual DOM并与上一次的作对比，然后对发生改变的部分进行批量更新。从此性能得到提升。

正文：通信

父——>子使用props。

子组件中（我的示例中，父组件1个，子组件3个）：

class Input extends React.Component{ //input子组件，class类型的组件
  constructor(props) {
    super(props);
    this.onChangeFunc = this.onChangeFunc.bind(this)
    this.onBlur = this.onBlur.bind(this)
  }
  render (){
    return <input className={this.props.color} 
                  value = {this.props.value} 
                  onChange={this.onChangeFunc}
                  onBlur = {this.onBlur}
            />
  }
  onChangeFunc(e){
    this.props.inputValueFunc(e.target.value)  //这里使用了从父组件传进来的方法
  }
  onBlur(e){
    var value = parseInt(e.target.value,10);
    if (value) {
        alert('你输入了数字')
    } else {
      alert('你输入了字符串')
    }
  }
}

class Button extends React.Component{
  render(){
    return <button className={this.props.color}>{this.props.name}</button>
  }
}

function Hello(props){  //props是从父组件中传进来的。
  return <div className={props.color}>{props.children}</div>
}

上面示例代码中，有3个子组件，其中前两个是class类组件，props是从父组件中传进来的对象。

父组件中：

class App extends Component {
  constructor(props){
    super(props)
    this.state = {value:'please input something'}
    this.inputValueFunc = this.inputValueFunc.bind(this)
  }
  inputValueFunc(value){
    this.setState({
      value: value
    })
  }
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>

        <Hello color='blue'>
        <h3>啦啦啦</h3>
        <p>Thank you for visiting !</p>
        </Hello>

        <Input inputValueFunc={ this.inputValueFunc } value={this.state.value} color='blue'/> //传入的props可以有方法。

        <Button color='blue' name='submit' value = {this.state.value}></Button> // 在引入子组件时候，传入props，就是上面的属性。
      </div>
    );
  }
}