React学习笔记 | 探索PureComponent&ref等API的强大功能

在React的世界里，PureComponent和ref API扮演着重要的角色，它们可以帮助我们优化组件性能，提升开发效率。让我们一起探索这些API的强大功能。

PureComponent：浅比较提升性能

在React中，组件的更新是由state和props的变化触发的。如果组件的state或props发生变化，组件就会重新渲染。然而，在某些情况下，组件的重新渲染可能是没有必要的，因为组件的输出并没有发生变化。

PureComponent就是为了解决这个问题而诞生的。PureComponent提供了一个具有浅比较的shouldComponentUpdate方法，它会比较组件的state和props是否发生变化，如果未发生变化，则组件不会重新渲染。

class MyPureComponent extends React.PureComponent {
  render() {
    return (
      <div>
        {this.props.message}
      </div>
    );
  }
}

在上面的例子中，MyPureComponent继承了PureComponent类。当MyPureComponent的props发生变化时，shouldComponentUpdate方法会被调用。如果props没有变化，则组件不会重新渲染。

ref：访问DOM元素

在React中，ref属性允许我们访问DOM元素。我们可以通过在组件的render方法中使用ref属性来实现。

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }

  render() {
    return (
      <div ref={this.myRef}>
        {this.props.message}
      </div>
    );
  }
}

在上面的例子中，我们在组件的构造函数中创建了一个ref对象，并在render方法中将其附加到div元素上。现在，我们可以通过this.myRef.current来访问div元素。

componentDidMount() {
  console.log(this.myRef.current); // 输出：<div>Hello World!</div>
}

结语

PureComponent和ref API是React中非常有用的工具，它们可以帮助我们优化组件性能，提升开发效率。希望这篇文章能够帮助您更好地理解和使用这些API。