Question

嘿，所有给定的基本反应成分都有c:。我想将其转换为使用react挂钩。现在，我看了这个问题here，尽管答案很简单，但我似乎还是对某些事情有所了解。例如：

componentWillReceiveProps

我知道从上面的示例中，除非nextProps保持不变，否则我们不会进入if语句。现在，将上述内容转换为功能组件是这样的：

export class Example extends React.Component {
  constructor(props) {
    super(props);
  }

  componentWillReceiveProps(nextProps) {
    console.log('HELLO WORLD') // Note this isn't called on initial render
    if (nextProps.match.params.id != this.props.match.params.id) {
      console.log('testing....')
    }
  }

  render() {
    return (
      <div>Cool</div>
    );
  }
}

我还准备了一份简短的gif图片，记录了我所看到的内容。 https://recordit.co/hPuwGey6WM

Answer 1

useEffect始终在首次渲染后运行。如果您不想在第一个渲染上运行useEffect，则可以将其与useRef

结合使用

const Example = ({ ...props }) => {
  const initialRender = useRef(true)
  useEffect(() => {
    if (initialRender.current) {
      initialRender.current = false;
    } else {
      // write code here
      console.log("TESTING");
    }
  }, [props.match.params.id]);

  return <div>Cool</div>;
};

Answer 2

不幸的是，useEffect设计为在第一个渲染器上运行，并且每次它的依赖项更改时都运行。

为避免在第一个渲染上运行，您将必须编写自己的小自定义钩子。

const useComponentWillReceiveProps = (callback, dependencies) => {
  const [firstRender, setFirstRender] = useState(true);

  useEffect(() => {
     if(firstRender) {
        setFirstRender(false);
        return;
     }
     callback();
  }, dependencies);
}

或者，您也可以使用ref来避免最初的重新渲染，例如：

const useComponentWillReceiveProps = (callback, dependencies) => {
   const firstRender = useRef(true);

  useEffect(() => {
     if(firstRender.current) {
        firstRender.current = false;
        return;
     }
     callback();
  }, dependencies);
}

转换componentWillReceiveProps函数以响应钩子

2 个答案: