项目中用到的根据观测值自动执行的函数 useEffect userMeno autorun

小白菜_白又白
321 阅读2分钟

学习链接：

autorun

  1. 这是mobx提供的方法。简单说就是观测的值(observable)发生变化是会执行。
  2. 使用 autorun 时，所提供的函数总是立即被触发一次。
  3. 在清除autorun时函数也会执行一次。

  @observable year;
  componentDidMount() {
    this.dispose = autorun(() => { //立即执行一次
      console.log(year)
    });
  }

  componentWillUnmount() {
    this.dispose(); 
  }

useEffect

  1. 函数式编程将那些跟数据计算无关的操作，都称为 副效应 （side effect)
  2. useEffect()是通用的副效应钩子 。找不到对应的钩子时，就可以用它。
  3. useEffect()的作用就是指定一个副效应函数。
useEffect(()=>{} [,[]])
  1. 如果不设置第二个参数， 组件每渲染一次，该函数就自动执行一次。组件首次在网页 DOM 加载后，副效应函数也会执行
  2. 如果不希望useEffect()每次渲染都执行，使用它的第二个参数，使用一个数组指定副效应函数的依赖项，只有依赖项发生变化，才会重新渲染。
  3. 如果第二个参数是一个空数组，就表明副效应参数没有任何依赖项。因此，副效应函数这时只会在组件加载进入 DOM 后执行一次，后面组件重新渲染，就不会再次执行。
  @observable year;
  
  useEffect(() => {
    console.log(year);
  }, [year]);
  1. useEffect()第一个参数允许返回一个函数，在组件卸载时，执行该函数，清理副效应。如果不需要清理副效应，useEffect()就不用返回任何值。
useEffect(() => {
  const subscription = props.source.subscribe();
  return () => {
    subscription.unsubscribe();
  };
}, [props.source]);
  1. useEffect 可以看成 componentDidMount / componentDidUpdate / componentWillUnmount 这 3 个生命周期函数的替代。
  2. useEffect 是在浏览器渲染结束之后才执行的，而这三个生命周期函数是在浏览器渲染之前同步执行的

useMemo

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
  1. 传入 useMemo 的函数会在渲染期间执行。
  2. 比较该组件的 props 和 state 是否有变化，有变化才触发。
  3. 类比生命周期就是shouldComponentUpdate。
  4. 返回值。与其类似的是useCallback， 返回一个函数。
avatar
文章
阅读
粉丝