react之state和props

state

state是React中组件的一个对象. React把用户界面当做是状态机,通过与用户的交互，实现不同状态，然后渲染UI，让用户界面和数据保持一致。

react中,更新组件的state,会导致重新渲染用户界面(不要操作DOM).简单来说,就是用户界面会随着state变化而变化

虚拟dom

react中提出虚拟DOM的相关概念，那么虚拟DOM是什么？

我们都知道传统的js操作DOM节点是直接获取DOM节点更改节点的相关信息，但是在react中提供了setState接口来改变html的节点

实现机制是当我们setState去重新更新UI时，react会使用differ算法判断哪个节点需要更新;

虚拟DOM是负责管理真是DOM的虚拟数据结构，就是当我们通过setState更新UI界面的时候，虚拟DOM会帮我们操作真实的DOM更新；这就避免我们直接操作DOM带来的性能问题

下面的代码实现的是，点击button的时候，累加text的值，再使用setState更新button的text显示

class HelloState extends React.Component {

  constructor(props) {
      super(props);
      // 初始状态
      this.state = {
          text:1
      };
  }
  click(){
    let text = this.state.text;
    text++;
    this.setState({text:text})
  }
  render (){
    return (
      <button onClick={()=>this.click()}>
          {this.state.text}
      </button>
    )
  }
}

props

组件中的props可以传递数据

class CustomButton extends Component {

    render(){
        const {text,onClick} = this.props;
        return(
            <button onClick={()=>onClick()}>
                {text}
            </button>
        )
    }
}

class HelloState extends React.Component {

  constructor(props) {
      super(props);
      this.state = {
          text:1
      };
  }
  click(){
    this.setState({text:++this.state.text})
  }
  render (){
    return (
      <CustomButton text={this.state.text} onClick={this.click.bind(this)}/>
    )
  }
}

其它推荐文章

react之组件的生命周期
react+webpack入门指南

RN项目

菜谱项目 源码
天气预报 源码

RN插件

键盘自适应插件 源码