将componentWillReceiveProps函数转换为react hooks。

嘿,所有给定一个基本的反应组件,有 componentWillReceiveProps. 我想把这个转换为使用react hooks。现在我已经看了这个问题 此处 虽然答案很直接,但我觉得自己好像误解了什么。例如,我知道,从上面的例子中,我们不会进入if语句,除非nextProps没有改变。

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>
    );
  }
}

我知道从上面的例子中,我们不会进入if语句,除非 nextProps没有改变。现在把上面的内容转换为函数组件是这样的。

export const Example = ({ ...props }) => {
  useEffect(() => {
    console.log('TESTING')
  }, [props.match.params.id])

  return (
    <div>Cool</div>
  )
}

我还准备了一个简短的录音gif来展示我所看到的情况。https:/recordit.cohPuwGey6WM

解决方案:

不幸的是。useEffect 被设计成在第一次渲染时和每次它的依赖关系变化时运行。

为了避免在第一次渲染时运行,你将不得不编写你自己的自定义小钩子。

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

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

或者,你也可以使用 refs 来避免初始重渲染,比如说。

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

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

给TA打赏
共{{data.count}}人
人已打赏
未分类

运行循环检查如果未定义[关闭]。

2022-9-8 1:50:37

未分类

我的图片在eclipse上运行时加载正常,但当导出为jar并打开时,根本没有图片。

2022-9-8 1:50:39

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索