React知识点-逐码极客

1、 react 使用 ref 出现 [eslint] Using string literals in ref attributes is deprecated. 错误

常规写法

class App extends React.Component {
  handleClick () {
    var h1 = this.refs.title;
  },
  render () {
    return (
      <div>
        <h1 ref="title">Hello, world.</h1>
        <a onClick={this.handleClick.bind(this)}>按钮</a>
      </div>
  }
}

正确写法

class App extends React.Component {
  handleClick () {
    var h1 = this.title;
  },
  render () {
    return (
      <div>
        <h1 ref={(c) => { this.title = c; }}>Hello, world.</h1>
        <a onClick={this.handleClick.bind(this)}>按钮</a>
      </div>
  }
}

2、父组件state更新引起子组件重新渲染的问题

子组件建议使用 PureComponent 组件

// PureComponents 只会在 state 或者 prop 的值修改时才会再次渲染。
// 通过对 state 和 prop 的 key 做浅比较（ shallow comparison ）来确定有没有变化。
class ARTCanvas extends React.PureComponent {

React知识点

生命周期

QA