React属性与事件

发表于 | 分类于 |

State 属性

  • state 对于模块属于 自身 属性
  • 初始化,ex:
    this.state = {username:"Parry"};
  • 初始化可以放置在构造函数的constructor里
  • 修改,ex:
    state: this.setState({username:"IMOOC"});
  • state 的作用域只属于当前的类，不污染其他模块

    Props 属性

  • Props 对于模块来说属于 外来 属性
  • 传递参数：
  • 模块中接受参数,ex：
    this.props.username

事件与数据的双向绑定

  • 事件的绑定
    • 注意ES6的语法
      1. 可以在构造函数里绑定，ex：
        this.forceUpdateHandler = this.forceUpdateHandcler.bind(this);
      2. 调用时绑定，ex：
        onlick = {this.changeUserInfo.bind(this,50)}
  • 子页面向父页面传递参数的方法
    • 在子页面中通过调用父页面传递过来的事件props进行组件间的参数传递
    • onChange与传统onBlur之间的差异

可复用组件

  • Prop 验证

    • ex:

      1
      const propTypes={id:PropTypes.numberr.isRequired,url:PropTypes.string.isRequired,text: PropTypes.string};

    • 使用方法，ex:
      BodyIndex.propTypes = {userid:React.PropTypes.number.isRequired};

  • 默认 Prop 值
    • ex：
      const defaultProps = {text: 'Hello World'};
    • 使用方法，ex:
      BodyIndex.defaultProps = defaultProps;
  • 传递所有参数的快捷方式
    • ex:
      <Component{...this.props} more = "values" />

组件的 Refs

  • 原始获取方法，ex:

    1
    2
    var myDiv = document.getElementById('myDiv');
    ReactDom.findeDomNode(myDiv).style.color = 'red';

  • 方法二的获取，ex：
    this.refs.myInput

  • Refs 是访问到组件内部DOM节点唯一可靠的方法
  • Refs 会自动销毁对子组件的引用
  • 不要再 render 或 render 之前对 Refs 进行调用
  • 避免滥用 Refs

独立组件间共享 MIxins