react里useEffect、useMemo的区别

useEffect

Effect Hook可以让你在函数组件中执行副作用操作,这里提到副作用,什么是副作用呢,就是除了状态相关的逻辑,比如网络请求,监听事件,查找dom 
 

useEffect类似于class组件中的生命周期函数,useEffect可以代替class组件中的三个生命周期,分别是:

componentDidMount 组件渲染执行函数、

componentDidUpdate 组件更新执行的函数、

componentWillUnmount 组件销毁执行时函数

const [count, setCount] = useState(0);

useEffect(() => {
    console.log('xxx') // 表示你要执行的动作
}, [count]); // 表示在count的值发生变化的时候,useEffect中的方法再执行一次,类似componentDidUpdate函数

useEffect是一个方法,其中有两个参数,一个是一个方法,表示你要执行的动作,另一个是依赖项,表示什么时候更新。

如果useEffect中第二个参数不填,表示只在组件第一次渲染的时候执行,类似于componentDidMount函数

  useEffect(() => {
    const timer = setInterval(() => {
      // do something
    }, 1000);

    // 表示在组件销毁的时候执行清楚定时器的动作,类似于componentWillUnmount函数
    return () => clearInterval(timer);
  }, []);

useEffect 的第二个参数,有三种情况

1、什么都不传,组件每次 render 之后 useEffect 都会调用,相当于 componentDidMount 和 componentDidUpdate
2、传入一个空数组 [], 只会调用一次,相当于 componentDidMount 和 componentWillUnmount
3、传入一个数组,其中包括变量,只有这些变量任意一个变动时,useEffect 才会执行

useMemo(主要针对当前组件中使用函数,优化性能)

useEffect和组件的生命周期有关,但useMemo跟生命周期不挂钩。

useMemo 是性能优化的手段,类似于类组件中的 shouldComponentUpdate,在子组件中使用 shouldComponentUpdate, 判定该组件的 props 和 state 是否有变化,从而避免每次父组件render时都去重新渲染子组件。

const [ count, setCount ] = useState(0)
const add = useMemo(() => count + 1 , [count])


点击次数: { count }
次数加一: { add }

参考文档:

React Hooks: 深入剖析 useMemo 和 useEffect - 知乎

React Hook 理解使用 useState、useEffect、useContext、useRef、自定义hook_芝芝葡萄的博客-CSDN博客_自定义hook的使用场景

你可能感兴趣的:(React,react.js,前端,reactjs)