如果客官喜欢就点一颗小星星吧, 谢谢啦^_^.

动机

升级react useState钩子函数能力，让状态只被初始化一次，特殊适合传入一些比较重的状态场景使用，从而节省函组件重复渲染期间初始化重状态的开销。

传统的useState

如果用户传入一个重状态给useState,在每一渲染期间都会被初始化。

import React, { useState } from "react";

function Demo() {

  const [heavyState] = useState(Array(1000000));
  return <h3>{heavyState.length}</h3>;
}
复制代码

使用useStateOnce

useStateOnce 接受一个普通状态和函数型状态，当用户传递函数型状态时，该函数只在组件初次渲染期间执行一次，所以你完完全全可以使用useStateOnce彻底代替useState

import React from "react";
import useStateOnce from "use-state-once";

const state = () => {
  console.log("this function will only been called one time");
  return Array(1000000);
};

function Demo() {
  const [heavyState, setHeavyState] = useStateOnce(state);
  return <h3>{heavyState.length}</h3>;
}
复制代码

useStateOnce 在线示例

Concent也提供此能力

Concent's 的useConcent接口和useStateOnce有同样的效果当用户传递状态函数作为参数时。

useConcent 在线示例

如果你打开了CodeSandbox, 你还可以拷贝其他文件的内容到App.js里，以便了解更多的concent有趣特性。