React.js入门基础与案例开发 by ParryKK in imooc.com 学习笔记

React state 属性

• state 对于模块属于自身属性

• state 的作用域只属于当前类,不污染其它模块

• state 初始化

  constructor() {
    super(); // 调用基类的所有初始化方法
    this.state = {
      username : "Parry",
      age : 20
    };    // 初始化赋值
  }
  

• state 变量调用

  <p>{this.state.username} {this.state.age}</p>
  

• state 变量更改

  this.setState({username: "IMOOC"});
  

React props 属性

• 模块的外来属性

• props 对于模块属于外来属性

• props 传递

  // Parent.js
  <Parent userid={123456} username={"nick"} />
  

• props 接收

  // Child.js
  <p>{this.props.userid} {this.props.username}</p>
  

• props 验证

  Prop Types 说明

  验证 Parent 传来的数据类型, 如果类型不对, console 会警告

  // Child.js
  Child.propTypes = {
    userid : React.PropTypes.number,
  }
  

  强制 Parent 必须传入 userid ,否则, console 会警告

  // Child.js
  Child.propTypes = {
    userid : React.PropTypes.number.isRequired
  }
  

  定义 props 默认值

  const defaultProps = {
      userid : 123
  }
  Child.defaultProps = defaultProps;
  Child.propTypes = {
    userid : React.PropTypes.number
  }
  

• 传递所有 props 参数

  <Component {...this.props} more="value" />
  

React 事件和数据双向绑定

• 事件绑定

  // Parent.js
  var React = require('React')
  // 外部组件必须 export 才能被加载
  export default class Parent extends React. Component {
    constructor() {
      super(); // 调用基类的所有初始化方法
      this.state = {
        username : "Parry",
        age : 20
      };    // 初始化赋值
    }
    changeUserInfo(age) {
      this.setState({
        age : age
      });
    }
    render() {
      <div>
        <p>username: {this.state.username}</p>
        <p>age: {this.state.age}</p>
        <input type="button" value="提交" onClick={this.changeUserInfo.bind(this, 99)} />
      </div>
    }
  }
  

• Child 传参数到 Parent

  // Parent.js
  var React = require('React')
  import Child = "./Child"
  // 外部组件必须 export 才能被加载
  export default class Parent extends React. Component {
    constructor() {
      super(); // 调用基类的所有初始化方法
      this.state = {
        username : "Parry",
        age : 20
      };    // 初始化赋值
    }
    changeUserInfo(event) {
      this.setState({
        age : event.target.value
      });
    }
    render() {
      <div>
        <p>username: {this.state.username}</p>
        <p>age: {this.state.age}</p>
        <Child changeUserInfo={this.changeUserInfo.bind(this)}/>
      </div>
    }
  }
  

  // Child.js
  var React = require('React')
  
  // 外部组件必须 export 才能被加载
  export default class Child extends React. Component {
    render() {
      <div>
        <p>子页面输入: <input type="text" onChange={this.props.changeUserInfo}</p>
      </div>
    }
  }
  

React 组件的 Refs

• 获取 html 节点进行操作

• 第一种方式 (html 原生方法)

  changeUserInfo(age) {
    var mySubmitBotton = document.getElementById('submitButton');
    ReactDom.findDOMNode(mySubmitBotton).style.color = 'red';
  }
  render() {
    <div>
      <input id="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this, 99)} />
    </div>
  }
  

• 第二种方式 (refs 方法)

  changeUserInfo(age) {
    this.refs.submitButton.style.color = 'red';
  }
  render() {
    <div>
      <input ref="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this, 99)} />
    </div>
  }
  

• Refs 是访问到组件内部 DOM 节点唯一可靠的方法

• Refs 会自动销毁对子组件的引用

• 不要在 render 或 render 之前对 Refs 进行调用, 因为组件还没加载好, 在 componentDidMount() 后调用

• 不要滥用 Refs

React 独立组件间共享 Mixin

• 组件间,事件共享

• 公共函数在不同的组件里调用

• 可以做组件属性或者生命周期的事件

• ES6 不支持,可以运用插件使用 Mixin

  sudo npm install --save react-mixin@2
  

  // mixins.js
  const MixinLog = {
    log() {
      console.log("hihi");
    }
  }
  export default MixinLog
  

  // Component.js
  import ReactMixin from 'react-mixin';
  import MixingLog from './mixins';
  export default class Component extends React.Component {
    changeUserInfo() {
      MixinLog.log();
    }
    render() {
      <div>
        <input ref="submitButton" type="button" value="提交" onClick={this.changeUserInfo.bind(this)} />
      </div>
    }
  }
  ReactMixin(Component.prototype, MixinLog);