javascript - 根据变量变化渲染功能组件

Question

当内部变量发生变化时，我无法让我的组件重新渲染。我正在开发的系统使用功能组件。案例是这样的:

export const myComponent = (props: compPropsType) => {
    const myClassNames ....

    let objectList= getObjectList(window.location.hash, props.pageTree);

    window.addEventListener('hashchange', () => {
        console.log('hello');
        objectList = getObjectList(window.location.hash, props.pageTree);
    });
    return (
        <>
        <header className={headerClassNames}>
            <Block className={...}>
            ...
            <myChildComp objList={objectList}>
            ...
    )
};

问题是渲染<myCildComp>当哈希更新时。 ( objectList 是一个字符串数组，用于创建导航工具栏。)

当我单击页面上的链接时，hello写入控制台，因此监听器正在工作，但它不会重新渲染子组件。

Answer 1

react 中的函数组件相当于类组件中的 render() 函数。

因此，在您的情况下，每次重新渲染组件时都会添加一个 eventListener ，这会导致内存泄漏，您应该使用 useEffect 钩子(Hook)来添加它一次，并在组件重新渲染时将其删除/钩子(Hook)被破坏。

你的组件不会重新渲染，因为没有任何东西告诉它。只有当状态或 Prop 发生变化时， react 中的组件才会重新渲染。所以在你的情况下，我认为你需要将 objectList 添加到状态组合中像这样使用 useEffect 钩子(Hook)

export const myComponent = (props: compPropsType) => {
    const myClassNames ....
     const [objectList, setObjectList] = useState([])

  const onHashChanged = () => {
    console.log('hello')

    let newObjectList = getObjectList(window.location.hash, props.pageTree)
    setObjectList(newObjectList)
  }

  useEffect(() => {
    window.addEventListener('hashchange', onHashChanged)
    return () => window.removeEventListener('hashchange', onHashChanged)
  }, [])
    return (
        <>
        <header className={headerClassNames}>
            <Block className={...}>
            ...
            <myChildComp objList={objectList}>
            ...
    )
};

当在 useEffect 中使用空数组作为第二个参数时，它只会被调用一次，相当于 componentDidMount 并且我返回一个回调函数来取消订阅/删除监听器，其工作方式类似于 componentWillUnmount