React中useMemo的简单使用

useMemo主要用来解决使用React hooks产生的无用渲染的性能问题，用来做缓存用。

会在在组件首次加载和重渲染期间执行，执行的函数需要和渲染相关的。

useMemo使用场景，比如有两个变量（依赖项），只需要在其中一个变量变化时发生变化，否则拿缓存的值；或者其中另一个变量的变化不需要引起重新计算时使用。该属性类似于vue中的计算属性，有返回值。

useMemo使用：
useMemo(fn, arr)第一个参数为函数。第二个参数为依赖项，并且其值发生改变，才会多次执行执行，否则只执行一次，如果为空数组[]，fn只执行一次。

• useEffect：会在组件渲染完毕后执行，和渲染无关的副作用。

• useMemo：会在在组件首次加载和重渲染期间执行，执行的函数需要和渲染相关的。

• useCallback：会在渲染期间执行，返回一个函数。

例子：

  const sampleStructureFormDataSet = useMemo(

    () =>

      new DataSet({

        ...sampleStructureFormDS(),

        fields:

          sampleStructureInfoFieldsUseRef.current.length > 0

            ? sampleStructureInfoFieldsUseRef.current

            : sampleStructureFormDS().fields,

      }),

    [sampleStructureInfoFieldsUseRef.current]//只有当这个值变化时才会引起上面的new DataSet中的值进行变化

  );