React冷门但很实用的知识要点

2024-01-30 01:06:16

getSnapshotBeforeUpdate()：在更新之前捕获DOM信息

getSnapshotBeforeUpdate()是React生命周期函数，在render()之前调用。它使得组件能在发生更改之前从DOM中捕获一些信息（例如，滚动位置）。这对于在组件更新后保持滚动位置或其他UI状态非常有用。

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    // 在render()之前调用
    // 可以从DOM中捕获信息，例如滚动位置
    const scrollPosition = window.scrollY;
    return scrollPosition;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    // 在render()之后调用
    // 可以使用从getSnapshotBeforeUpdate()返回的信息
    window.scrollTo(0, snapshot);
  }

  render() {
    // ...
  }
}

2. forwardRef()：将父组件的ref传递给子组件

forwardRef()方法允许您将父组件的ref传递给子组件。这对于访问子组件的DOM元素或实例非常有用。

const MyComponent = React.forwardRef((props, ref) => {
  // ref是父组件传递的ref
  return <input ref={ref} />;
});

const App = () => {
  const inputRef = React.createRef();

  return (
    <div>
      <MyComponent ref={inputRef} />
      <button onClick={() => { inputRef.current.focus(); }}>Focus input</button>
    </div>
  );
};

3. React.memo()：优化组件的性能

React.memo()钩子可用于优化组件的性能。它通过比较组件的props来决定是否需要重新渲染。如果props没有变化，则组件将不会重新渲染，从而提高性能。

const MyComponent = React.memo((props) => {
  // 只有当props发生变化时才重新渲染
  return <div>{props.message}</div>;
});

const App = () => {
  const [message, setMessage] = React.useState('Hello world');

  return (
    <div>
      <MyComponent message={message} />
      <button onClick={() => { setMessage('Goodbye world'); }}>Change message</button>
    </div>
  );
};

4. createRef()：创建ref并附加到DOM元素

createRef()钩子可用于创建ref并附加到DOM元素。这对于访问DOM元素或实例非常有用。

const inputRef = React.createRef();

const MyComponent = () => {
  return <input ref={inputRef} />;
};

const App = () => {
  return (
    <div>
      <MyComponent />
      <button onClick={() => { inputRef.current.focus(); }}>Focus input</button>
    </div>
  );
};