【笔记】React的类组件

前言

React的类组件学习笔记

定义组件

• 类名（组件名）首字母大写
• 每个组件只能由一个根组件构成，根组件内可以包含任意数量的子组件
• 每当使用return返回组件时，推荐使用()进行包裹，便于与原始JS代码区分
• 使用组件时，既可以使用单标签引入，也可以使用双标签引入

class Component extends React.Component {

  ...

  render() {
    return (<>
      ...
    </>);
  }
}

定义组件的状态

渲染值

class Component extends React.Component {

  constructor() {
    super();

    this.state = {
      key: "value"
    };
  }

  render() {
    return (<>
      <div>{ this.state.key }</div>
    </>);
  }
}

渲染数组

class Component extends React.Component {

  constructor() {
    super();

    this.state = {
      key: []
    };
  }

  render() {
    return (<>
      <ul>{ this.state.key.map(item -> <li>{ item }</li>) }</ul>
    </>);
  }
}

定义组件的实例方法

• 在render()中使用实例方法时，需要重新绑定this，才能在实例方法中使用this

只有event参数的情况

• 在构造方法中统一为实例方法绑定this

class Component extends React.Component {

  constructor() {
    super();

    this.fn = this.fn.bind(this);
  }

  fn(event) {
    ...
  }

  render() {
    return (<>
      <div onClick={ this.fn }></div>
    </>);
  }
}

• 在传递实例方法时绑定this

class Component extends React.Component {

  fn(event) {
    ...
  }

  render() {
    return (<>
      <div onClick={ this.fn.bind(this) }></div>
    </>);
  }
}

• 不使用实例方法，改为使用实例属性，并且属性值是箭头函数定义的函数，这种方式无需显式绑定this

class Component extends React.Component {

  fn = (event) => {
    ...
  }

  render() {
    return (<>
      <div onClick={ this.fn }></div>
    </>);
  }
}

• 不使用实例方法，改为直接使用箭头函数，箭头函数执行需要调用的实例方法，这种方式无需显示绑定this

class Component extends React.Component {

  fn = (event) => {
    ...
  }

  render() {
    return (<>
      <div onClick={ (event) =>  this.fn(event) }></div>
    </>);
  }
}

除了event参数还包含其他自定义参数的情况

• 在传递实例方法时绑定this

class Component extends React.Component {

  fn(arg, event) {
    ...
  }

  render() {
    return (<>
      <div onClick={ this.fn.bind(this, "value") }></div>
    </>);
  }
}

• 不使用实例方法，改为直接使用箭头函数，箭头函数执行需要调用的实例方法，这种方式无需显示绑定this

class Component extends React.Component {

  fn = (event, arg) => {
    ...
  }

  render() {
    return (<>
      <div onClick={ (event) =>  this.fn(event, "value") }></div>
    </>);
  }
}

在组件的实例方法中修改组件的状态

• 通过this.setState()修改组件的状态时，只会修改实参对象中定义的属性，而不会覆盖其他属性
• 调用this.setState()修改组件的状态完成后，会自动执行render()重新渲染DOM

class Component extends React.Component {

  constructor() {
    super();

    this.state = {
      key: "default"
    };

    this.fn = this.fn.bind(this);
  }

  fn() {
    this.setState({
      key: "value"
    });
  }

  render() {
    return (<>
      <div onClick={ this.fn }>{ this.state.key }</div>
    </>);
  }
}

完成