关于react.js:react篇lesson1知识点

37次阅读

共计 2586 个字符，预计需要花费 7 分钟才能阅读完成。

第一步创立 context 对象

const MyContext = React.createContext();
export default MyContext;

第二步应用 provider 传递数据
```
export default const Index = (props) => {const [data] = React.useState({});

 return <MyContext.Provider value={data}>
     {prop.children}
 </MyContext.Provider>
};
```
留神这里的 data 应该是 Index 组件的一个状态，防止因为每次 Index 刷新，data 从新是生成，导致子组件也 diff，具体解释。
子孙组件生产 value
生产 context 的值有三种形式；
contextType

class MyClass extends React.Component {componentDidMount() {
    let value = this.context;
    /* 在组件挂载实现后，应用 MyContext 组件的值来执行一些有副作用的操作 */
  }
  componentDidUpdate() {
    let value = this.context;
    /* ... */
  }
  componentWillUnmount() {
    let value = this.context;
    /* ... */
  }
  render() {
    let value = this.context;
    /* 基于 MyContext 组件的值进行渲染 */
  }
}
MyClass.contextType = MyContext;

留神：你只通过该 API 订阅繁多 context。如果你想订阅多个，请应用 Cunsumer。如果你正在应用实验性的 public class fields 语法，你能够应用 static 这个类属性来初始化你的 contextType。

class MyClass extends React.Component {
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}

Cunsumer
```
<MyContext.Consumer>
  {value => /* 基于 context 值进行渲染 */}
</MyContext.Consumer>
```
这种办法须要一个函数作为子元素（function as a child）。这个函数接管以后的 context 值，并返回一个 React 节点。传递给函数的 value 值等价于组件树上方离这个 context 最近的 Provider 提供的 value 值。如果没有对应的 Provider，value 参数等同于传递给 createContext() 的 defaultValue。
useContext
应用比较简单，然而只能在 hook 语法中应用：

function ShowAn(){
// 调用 useContext，传入从 MyContext 获取的上下文对象。const value = useContext(MyContext);
  return(
    <div>
      the answer is {value}
    </div>
  )

更加粗疏的内容能够参照 react 官网给出的文档

这个就不陈词滥调了，懂的都懂，简略点说就是在订阅阶段将数据压入到队列中，公布的时候在遍历下这个队列取出想要的后果进行操作；
这里想说的是，到编写公布订阅这个模式的代码是咱们应该留神到的一个细节就是，与订阅成对呈现的还有一个就是 勾销订阅 ，只有写了勾销订阅的程序才会在肯定水平上失去优化。
咱们能够再订阅阶段的函数中在 push 阶段的函数中这样操作，

const subscribe = (data) => {Array.push(data);
    return () => {Array = Array.filter(item => item !== data);
    }
}
// 而后在订阅函数调用的中央这样写
const unsubscribe = subscribe(data);

当咱们想要勾销订阅的时候间接调用 unsubscribe() 即可是不是很不便呢！认真看一下是不是很像是 hook 语法中 useEffect 的应用形式。

明天看到一个有意思的博客，次要说异步中断的问题，一开始在说 jq 的 ajax、axios，以及 fetch 的超时问题，后面的都比较简单，ajax 有 .abort() 函数，axios 原本就存在 time 字段，fetch 也是能够中断的，只需一个 AbortController 对象获取 signal, 并将这个信号对象作为 fetch 的选项传入。

async function fetchWithTimeout(timeout, resoure, init = {}) {const ac = new AbortController();
    const signal = ac.signal;
    
    const timer = setTimeout(() => {console.log("It's timeout");
        return ac.abort();}, timeout);
    
    try {return await fetch(resoure, { ...init, signal});
    } finally {clearTimeout(timer);
    }
}

重点来了 (敲黑板画知识点)，万物皆可超时，Axios 和 fetch 都提供了中断异步操作的路径，但对于一个不具备 abort 能力的一般 Promise 来说，该怎么办？
文中给了一个很奇妙的解决办法；
Promise 尽管没有 abort 能力然而咱们想要对其进行超时中断能够利用.race 办法，race 是竞速的意思，所以 Promise.race() 的行为是不是很好了解？

function waitWithTimeout(promise, timeout, timeoutMessage = "timeout") {
    let timer;
    const timeoutPromise = new Promise((_, reject) => {timer = setTimeout(() => reject(timeoutMessage), timeout);
    });

    return Promise.race([timeoutPromise, promise])
        .finally(() => clearTimeout(timer));    // 别忘了清 timer
}

正文完