React state与props学习笔记

前端之家收集整理的这篇文章主要介绍了React state与props学习笔记前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

组件的状态与属性

组件本质上是状态机,输入确定,输出一定确定。组件把状态与结果一一对应起来,组件中有state与prop(状态与属性)。

  • 属性(props)是由父组件传递给子组件的;

  • 状态(state)是子组件内部维护的数据,当状态发生变化的同时,组件也会进行更新。当状态发生转换时会触发不同的钩子函数,从而让开发者有机会做出相应。

props

属性用法

  1. 键值对:值可以有多种形式<HelloWorld name= ? />

    • 字符串:"XiaoWang";

    • 求值表达式 {123}、{"XiaoWang"};

    • 数组{[1,2,3]};

    • 变量{variable};

    • 函数求值表达式{function}(不推荐,如果需要函数可以单独把函数提取出来然后单独调用函数);

  2. 展开语法{...props}:
    React会自动把对象中的属性和值当做属性的赋值

  3. @H_502_52@
    var HelloWorld =React.createClass({
        rencer:function () {
            return <p>Hello,{this.props.name1 + ' 'this.props.name2}</p>;
        },});
    var HelloUniverse = React.createClass({
        getInitialState:function () {
            return {
                name1:'Tim',name2:'John',};
        },handleChange: function (event) {
            this.setState({name: event.target.value});
        },render: function () {
            return <div>
            <HelloWorld name={...this.state}></HelloWorld>
            <br/>
            <input type="text" onChange={this.handleChange} />
            </div>
        },});
    ReactDom.render(<HelloUniverse />,document.body);
    1. setProps:

      var HelloWorld =React.createClass({
          rencer:function () {
              return <p>Hello,{this.props.name ? this.props.name : "World"}</p>;
          },});
      var instance = React.render(<HelloWorld />,document.body);
      instance.setProps({name:'Tim'});
    2. @H_502_52@

      setProps(object nextProps[,function callback])可以设置组件的属性。这个方法已经过时了(与replaceProps等一样),不久将被删除。这个方法不支持ES6类组件React.Component扩展。

      propTypes

      组件的属性可以接受任意值,字符串、对象、函数等等都可以。有时,我们需要一种机制,验证别人使用组件时,提供的参数是否符合要求。

      var MyTitle = React.createClass({
        propTypes: {
          title: React.PropTypes.string.isrequired,//这个title是必须的,而且它的值必须是字符串
        },render: function() {
           return <h1> {this.props.title} </h1>;
         }
      });

      getDefaultProps

      getDefaultProps 方法可以用来设置组件属性的默认值。

      var MyTitle = React.createClass({
        getDefaultProps : function () {
          return {
            title : 'Hello World'
          };
        },render: function() {
           return <h1> {this.props.title} </h1>;
         }
      });
      ReactDOM.render(<MyTitle />,document.body);

      this.props.children

      this.props 对象的属性与组件的属性一一对应,但是有一个例外,就是 this.props.children 属性。它表示组件的所有子节点。

      state

      组件在运行时需要修改的数据就是状态,this.state 是会随着用户互动而产生变化的特性。组件免不了要与用户互动,React 的一大创新,就是将组件看成是一个状态机,一开始有一个初始状态,然后用户互动,导致状态变化,从而触发重新渲染 UI。

      state工作原理

      常用的通知 React 数据变化的方法调用 setState(data,callback)。这个方法会合并(merge) data 到 this.state,并重新渲染组件。渲染完成后,调用可选的 callback 回调。大部分情况下不需要提供 callback,因为 React 会负责把界面更新到最新状态。

      getInitialState

      object getInitialState()
      getInitialState 方法用于定义初始状态,也就是一个对象,这个对象可以通过 this.state 属性读取。在组件挂载之前调用一次。返回值将会作为 this.state 的初始值。

      setState

      setState(object nextState[,function callback])
      合并 nextState 和当前 state。这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。另外,也支持可选的回调函数,该函数在 setState 执行完毕并且组件重新渲染完成之后调用。this.setState 方法用于修改状态值,每次修改以后,自动调用 this.render 方法,再次渲染组件。

      replaceState

      replaceState(object nextState[,function callback])
      类似于 setState(),但是删除之前所有已存在的 state 键,这些键都不在 nextState 中。

      哪些组件应该有 State?

      大部分组件的工作应该是从 props 里取数据并渲染出来。但是,有时需要对用户输入、服务器请求或者时间变化等作出响应,这时才需要使用 State。

      尝试把尽可能多的组件无状态化。这样做能隔离 state,把它放到最合理的地方,也能减少冗余,同时易于解释程序运作过程。

      常用的模式是创建多个只负责渲染数据的无状态(stateless)组件,在它们的上层创建一个有状态(stateful)组件并把它的状态通过 props 传给子级。这个有状态的组件封装了所有用户的交互逻辑,而这些无状态组件则负责声明式地渲染数据。

      参考文章

猜你在找的React相关文章