https://github.com/zhangyu1818/react-observed-context

利用React隐藏特性来让Context只在当前组件使用字段改变时更新组件。
https://github.com/zhangyu1818/react-observed-context

Last synced: 23 days ago
JSON representation

利用React隐藏特性来让Context只在当前组件使用字段改变时更新组件。

• Host: GitHub
• URL: https://github.com/zhangyu1818/react-observed-context
• Owner: zhangyu1818
• Created: 2021-03-07T06:16:12.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2024-01-09T08:38:55.000Z (12 months ago)
• Last Synced: 2024-01-09T09:43:44.636Z (12 months ago)
• Language: TypeScript
• Homepage:
• Size: 5.86 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-observed-context

> 这个功能只在16和17可用，18不可用了。

> 

> 具体原理可查看[React中Context的精准更新](https://juejin.cn/post/6936576203612651534)。

利用React隐藏特性来让Context只在当前组件使用字段改变时更新组件。

## 使用

```shell

yarn add react-observed-context

```

## 示例

```jsx

import { render } from "react-dom";

import createObservedContext from "react-observed-context";

const Context = createObservedContext({ user: "", password: "" });

const Input = ({ name }) => {

  const [ state, setState ]= Context.useObservedState(name);

  return (

    

        setState((prev) => ({ ...prev, [name]: target.value }))

      }

    />

  );

};

function App() {

  return (

    

      

      

    

  );

}

render(, document.getElementById("root"));

```

## API

**createObservedContext**

```javascript

/**

 * baseState 默认值

 */

function createObservedContext(baseState)

```

****

```jsx

  { children... }

```

**Context.useObservedState**

```javascript

/**

 * key 观察的字段，数组或字符串，false为不观察，如自定义第二个setState

 */

function useObservedState(key)

```

## 警告

此功能依赖React非稳定性`future`，开发环境控制台会有`warning`警告。

最多可观察31个字段。