在變量更改時渲染功能組件

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

問題是在 hash 更新時呈現<myCildComp> 。 （ objectList是一個字符串數組，用於創建導航工具欄。）

當我單擊頁面上的鏈接時， hello被寫入控制台，因此偵聽器正在工作，但它不會重新呈現子組件。

Answer 1

react中的函數組件等效於類組件中的render（）函數。

因此，在您的情況下，每次重新渲染組件時都會添加一個eventListener，這會導致內存泄漏，您應該使用useEffect鈎子將其添加一次，並在銷毀組件/鈎子時將其刪除。

您的組件不會重新渲染，因為什么都沒有告訴它。.僅當狀態或道具發生更改時，組件的響應才重新渲染..因此，在您的情況下，我認為您需要將objectList添加到state並與useEffect掛鈎組合像這樣

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

Answer 2

如評論中所建議，我將函數重寫為一個類：

export class myComponent extends React.PureComponent<PropsTypes> {
    constructor(props) {
        super(props)
        this.state = {objList = getObjectList(window.location.hash, this.props.pageTree)};
    }
    componentDidMount(): void {
        window.addEventListener('hashchange', () => {
            this.setState({
            breadcrumbList: getObjList(window.location.hash, this.props.pageTree),
            });
        });
    }
    render() {
    return (....
        <myChildComp objList={this.state.objList}>
    ...

這可行，但這是最好的方法嗎？