react学习

react16学习笔记

• 思否编程：有很多都是大厂大佬

  • react Hooks 案例详解：https://ke.segmentfault.com/course/1650000018455301#nav-section-list-title

  • React Fiber 工作原理解析：https://ke.segmentfault.com/course/1650000018853377

  • 自己还买了：前端高级进阶知识点入门 (opens new window)

• Hooks 之 useEffect：https://juejin.cn/post/6958710255194898446 (opens new window)

  • useLayoutEffect和useeffect区别：https://juejin.cn/post/7008741851486224397 (opens new window)

• react hook使用注意点：（自注）

  • 只要hook里使用的数据需要更新，那么这个数据就需要写在hook的第二个参数里；否则hook里的数据不会随着数据的更新而更新。

• react状态管理：

  - 只提供了hook方式没有提供类组件的使用方式：https://blog.csdn.net/qiwoo_weekly/article/details/109006560

  - redux最佳实践redux-toolkit使用指南：https://zhuanlan.zhihu.com/p/382487951

  + 可以在类组件里使用：https://github.com/icesman/issues/issues/1

• react不常用api：

  • Children：

    • https://juejin.cn/post/6844903842438447112
    • https://juejin.cn/post/6844904036827676686
    • 这个API是专门用来处理组件的children的：https://blog.csdn.net/kelly0721/article/details/114292235
      • 文章截图 (opens new window)
    • 即使父组件没有子组件/子元素，他的props.children还是有值的等于空数组——[]。此时使用React.Children.toArray(children).length来判断是否有子组件/子元素。

  • cloneElement：

    • https://juejin.cn/post/6844904036827676686 搜索 【这里我们用上我们最后的一个api React.cloneElement】
      • 结果是一个对象。我们可以利用他来对属性做操作。例如上面的操作就是增加属性。当然我们可以查询、修改、删除属性。凡是被当做变量使用的组件可以在render函数里通过 {变量xxx}的形式去渲染。我们可以通过这个变量去拿到这个组件的type和其他属性值，非常方便我们修改组件。

  • createFactory：React组件创建的三种方式——https://www.bbsmax.com/A/kvJ3Y9N9dg/

  • use：没找到相应文章

  • cache：cache包裹的函数，当多次调用时，如果传参不变，会始终返回缓存值

  • https://www.51cto.com/article/721353.html

  • react顶层pai

    • https://juejin.cn/post/7085145274200358949#heading-49

  • 为什么需要React.Children.toArray

    • 用于将 props.children 转换为一个扁平的数组。它接收一个 props.children 作为参数，并返回一个数组，其中包含所有的子元素（包括字符串、数字、元素或者数组）。有时候直接对 props.children 进行操作，可能会出现一些问题:首先，当 props.children 只有一个子元素时，它的类型不是数组，而是一个单独的 React 元素。如果直接对它进行数组操作，会导致类型错误。此外，当 props.children 没有子元素时，它的值为 null，而不是一个空数组，这也可能导致类型错误或者其他问题。另外，当 props.children 包含嵌套的子元素时，如果不对它进行递归处理，可能会无法访问到所有的子元素，或者无法正确处理子元素的嵌套结构。因此，为了避免这些问题，建议在对 props.children 进行操作之前，先使用 React.Children.toArray 将其转换为一个扁平的数组，这样可以方便地遍历和处理所有的子元素，无论它们的类型和数量。

• Portals传送门

  • 
  • https://zhuanlan.zhihu.com/p/697979691

• 通过 useReducer 和 useContext，我们完全可以实现一个小型的 Redux

  • Context.js

    • export const Context = createContext(null);
      

  • reducer.js

    • export const reducer = (state, action) => {  
      switch(action.type) {  
      case "increment":  
      }  
      return state + 1;  
      case "decrement":  
      return state 1;  
      default:  
      return state;  
      }  
      export const defaultState = 0;  
      

  • app.js

    • function App() {  
      const [state, dispatch] = useReducer (reducer, defaultState)  
      return (  
      <Context.Provider value={{state, dispatch}}>  
      <ChildOne />  
      <ChildTwo />  
      </Context.Provider>  
      )  
      }  
      function ChildOne() {  
      const { state, dispatch} = useContext(Context);  
      return (  
      <div>  
      <h1>{state}</h1>  
      <button onClick={() => dispatch({ type: "increment"})}>  
      increment  
      </button>  
      <button onClick={() => dispatch({ type: "decrement"})}>  
      decrement  
      </button>  
      </div>  
      )  
      }  
      

• react hooks原理

  • 参考 (opens new window)