React中的一些好用语法糖hooks分析（1）useGlobalValue

在编程中，“语法糖”（Syntax Sugar）是一个术语，用来描述那些设计上只是为了增加代码可读性和简化编程的语法特性。这些特性本身并不改变语言的基本功能或计算能力，而是让开发者能够以更简洁、更直观的方式表达常见的编程结构或模式。

通过上面的引用可以清楚地发现语法糖的特性：不改变语言基本功能、代码更简洁、更直观。 最近也是在Github上观察，发现了React-use这一个比较不错的开源项目，想着就做这么一个合集，加深一下自己对React的理解（不定期更新）

问题抛出

先从一段比较基础的代码说起：

import React, { useState } from "react";


function Demo1(props){
  const {setValue,value} = props;
  return <button onClick={()=>setValue(value+1)}>点击我以增加</button>
}

function Demo2(props) {
  const {setValue,value} = props;
  return <button onClick={()=>setValue(value-1)}>点击我以减少</button>
}
function App() {
  const [value, setValue] = useState(0);

  return (
    <div>
      <p>{value}</p>
      <Demo1 setValue={setValue} value={value}/>
      <Demo2 setValue={setValue} value={value}/>
    </div>
  );
}

export default App;

父组件定义了value属性和更改value状态的方法，子组件如果想要对状态修改，就依赖于父组件的传递，那么仅以这一个组件来说？有没有什么可以提高开发效率的方法呢？

解决问题

在react-use中，提供了下面的一个语法糖，可以实现类似于“全局状态”这一个功能。这样，就可以实现三个组件间的信息通信。

const useGlobalValue = createGlobalState<number>(0);

const CompA: FC = () => {
  const [value, setValue] = useGlobalValue();

  return <button onClick={() => setValue(value + 1)}>+</button>;
};

const CompB: FC = () => {
  const [value, setValue] = useGlobalValue();

  return <button onClick={() => setValue(value - 1)}>-</button>;
};

const Demo: FC = () => {
  const [value] = useGlobalValue();
  return (
    <div>
      <p>{value}</p>
      <CompA />
      <CompB />
    </div>
  );
};

原理简单分析

其实这里的createGlobalState()和useGlobalValue()有点类似于我们熟知的发布订阅和redux，createGlobalState()相当于往事件池中初始化属性，而useGlobalValue()接受属性变量和更改属性的方法，通过页面上的触发的事件通知属性更新，每个组件获取到最新的状态值进行重新渲染。