javascript - react这个bind是不是多余的 ？

Question

  constructor(props) {
    super(props);
    this.render = this.render.bind(this);
    this.state = {
      items: this.props.items,
      disabled: true
    };
  }

Answer 1

答

你这个 bind 是多余的，因为 render 方法是React加载时自己调的， this 本来就是 component 实例

需要的情况

当使用 es6 的 class 的写法来写 component 时，事件绑定中的this会指定当前标签的props， 这时需要使用 这种 bind 绑定到 component，以便在回调中使用 this 的方法比如setState，参考 Autobinding

class SayHello extends React.Component {
  constructor(props) {
    super(props);
    // This line is important!
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    alert('Hello!');
  }

  render() {
    // Because `this.handleClick` is bound, we can use it as an event handler.
    return (
      <button onClick={this.handleClick}>
        Say hello
      </button>
    );
  }
}

怎么不用 bind

如果你用 babel 的话可以添加安装这个 transform-class-properties，（或者react提供的create-react-app，默认已经包含了）

npm install --save-dev babel-plugin-transform-class-properties
# 还有在 babelrc 或者配置中添加
"plugins": ["transform-class-properties"]

写法就变成

class SayHello extends React.Component {
  handleClick = () => {
  }
}