react 函数组件的缺点

1. 容易产生闭包

若在useEffect中使用监听事件addEventListener调用func方法，js会记录此时的上下文数据，当调用func方法时，使用的数据是旧的数据

解决方法：可以在data数据获取到之后再添加监听，或者data数据变化就重新添加监听，但是这样会可能导致无法取消监听的情况，越加越多，每次都会调用几次。

2. 无法取消监听

若在useEffect中使用了监听addEventListener调用func方法，由于每次渲染都会重新调用运行函数组件，所以func每次的函数引用都会更新，会导致无法取消监听removeEventListener

解决方法：使用useCallback，第二个参数为空“[]”(不随任何变化而变化)，但是这样又回到第一个问题，函数会形成闭包，里面使用的数据还是旧数据

function App(props){
    const [data, setData] = useState({})
    const func = () => {
        console.log(data) // 即使data变化了，输出的还是 “{}”
        ajax("url", {id: data.id}) // data.id为undefined
    }
    useEffect(() => {
      if(props.visible){
        window.addEventListener("message", func)
      }else {
        window.removeEventListener("message", func) // 若组件重新渲染过，func会重新定义，函数的引用变化了，所以监听会无法取消
      }
    }, [props.visible])
}

// 使用类组件可以避免这2种情况
class App extends Component {
  componentDidUpdate(prevProps){
    if(!prevProps.visible && this.props.visible){ // 打开
      window.addEventListener("message", this.func)
    }else if(prevProps.visible && !this.props.visible){ // 关闭
      window.removeEventListener("message", this.func)
    }
  }
  // 或者使用componentDidMount、componentWillUnMount
  componentDidMount(){
      window.addEventListener("message", this.func)
  }
  componentWillUnMount(){
      window.removeEventListener("message", this.func)
  }
}