React知识图谱

组件化

状态值：组件内用到，并且会发生更新，一旦状态值更新，会引起组件重新渲染。

• 类组件 this.state
• 函数组件 useState、useReducer

数据跨层级传递：Context

• 使用方式三步走

  • 1. 创建Context对象
  • 2. 使用Context.Provider传递value

  • 3. Provider的子组件消费value

    • contextType：只能用在类组件，只能订阅单一的context来源
    • useContext：只能用在函数组件或者自定义hook中
    • Context.Consumer

HOC：高阶组件是参数为组件，返回值为新组件的函数。

• Antd3 Form、react-redux connect、react-router withRouter等

传送门createPortal

• ReactDOM.createPortal(child, container); 一种将子节点渲染到 DOM 节点中的方式

Hook：React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。

规则1：不要在循环，条件或嵌套函数中调用 Hook， 确保总是在你的 React 函数的最顶层调用他们。 规则2：只能在函数组件或者自定义hook中使用hook函数。

useState

• const [state, setState] = useState(initialState); 返回一个 state，以及更新 state 的函数。

useReducer

• const [state, dispatch] = useReducer(reducer, initialArg, init); 类似useState。试想这样一个场景，state更新条件复杂，这个时候如果使用useState，那么执行setState的函数时候就会比较臃肿，这个臃肿的函数也很难实现复用。这个时候，可以考虑使用useReducer了，把state更新规则写在一个reducer函数中，这样不仅reducer可以复用，并且组件中也没有复杂的state修改规则。

useEffect

• 接收一个包含命令式、且可能有副作用代码的函数。默认情况下，effect 将在每轮渲染结束后执行，但我们可以通过控制依懒值选择让它只有某些值改变的时候才执行。可以类比类组件的componentDidMount、componentDidUpdate和componentWillUnmount。

useLayoutEffect

• 其函数签名与 useEffect 相同，但它会在所有的 DOM 变更之后同步调用 effect。使用场景如react-redux的connect。

useContext

• 接收一个 context 对象（React.createContext 的返回值）并返回该 context 的当前值。

useCallback

• 缓存函数

useMemo

• 缓存参数

useRef

• 返回的 ref 对象在组件的整个生命周期内保持不变。

  • 使用场景如Antd4 Form实现useForm的时候。

useImperativeHandle

• useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。使用场景如Antd4 Form实现Form的时候。

状态管理库

redux：函数式编程

- redux是JavaScript应用的状态容器。它保证程序行为一致性且易于测试。

	- createStore 创建store
	- reducer 初始化、修改状态函数
	- getState 获取状态值
	- dispatch 提交更新
	- subscribe 变更订阅
	- 常见中间件

		- 异步

			- redux-thunk：使用简单，但是容易形成“嵌套地狱”
			- redux-saga：使用“复杂”，但是能够用同步的方式实现异步，内部使用了generator函数，比async await功能更丰富
			- redux-observable：基于rxjs，学习成本较高

		- 状态更新日志

			- redux-logger

		- 处理promise

			- redux-promise

mobx：响应式编程

• mobx通过透明的函数响应式编程使得状态管理变得简单和可扩展。

  • 1. 定义状态并使其可观察

    • observable

  • 2. 创建视图以响应状态的变化

    • observer HOC

      • 返回响应式组件，它可以自动追踪哪个可观察量被使用了以及当值改变的时候自动重新渲染这个组件。

    • Observer component

      • 只能使得它自己的返回组件是响应式的，如果你里面还嵌套了别的组件，那这个里面的组件得靠自己变成响应式~

    • useObserver hook

      • 优点：任何的hook改变observable，组件都不会重复渲染。
      • 缺点：就算是在组件的某一部分使用，但是却能引起组件的全部更新~，所以慎用，如果想要精细控制的话，还是要选择或者useForceUpdate。

  • 3. 更改状态

    • action

      • 建议对任何修改 observables 或具有副作用的函数使用action。 结合开发者工具的话，动作还能提供非常有用的调试信息。

recoil：融合React自身（目前还处于实验阶段）

• recoil是Facebook开发的状态管理库，目标是做一个高性能的状态管理库，并且可以使用React内部的调度机制，包括会支持并发模式。

以上三者对比

• redux是集中式管理state，而recoil和mobx都是分散式。

• recoil中状态的读写都是Hooks函数，目前没有提供类组件的使用方式。

• recoil是Facebook开发的，可以使用React内部的调度机制，这是redux和mobx不支持的。

• recoil目前还是实验阶段，想要应用到的自己的项目中，等待正式版发了再说吧。

• 共同点

  • 爱用不用。目前任何一个状态管理库都不是强制使用的，也有很多精小的项目不使用第三方状态管理库，而只是使用React自身的state、useContext等API就可以达到目的。当然，对于大型项目，个人还是建议使用一个状态管理库，毕竟项目越大，需要管理、共享的状态越多，这个时候为了避免data层与view层变成一锅粥，还是使用个状态管理库吧。

路由管理库

react-router 目前最新版本是5.2.0： 根据url与组件的映射关系切换组件的显示

• Router

  • BrowserRouter：使用 HTML5 提供的 history API (pushState, replaceState和popstate事件) 来保持 UI 和 URL 的同步。
  • HashRouter：使用 URL 的 hash 部分（即 window.location.hash）来保持 UI 和 URL 的同步。
  • MemoryRouter：把 URL 的历史记录保存在内存中的 （不读取、不写入地址栏）。在测试和非浏览器环境中很有用，如React Native。

• Route

  • 渲染组件

    • children:func

      • 不管与path匹配与否都渲染

    • component:component

      • 匹配才会渲染

    • render:func

      • 匹配才会渲染

• Switch

  • 渲染与该地址匹配的第一个子节点 或者 。

• Redirect

  • 渲染 将使导航到一个新的地址。

• Link

  • 跳转组件

• NavLink

  • 一个特殊版本的 Link，当它与当前 URL 匹配时，为其渲染元素添加样式属性。

• Redirect

  • 重定向。路由守卫时，会有到这个组件。

• withRouter

  • HOC。可以通过它访问route props。

• 自定义hook方法

  • useHistory、useLocation、useRouteMatch、useParams

脚手架

create-react-app

• FaceBook支持，它提供了一个零配置的现代构建设置。建议初学者自己学习的时候用这个架子入手，但是不建议用到公司项目中去，因为用cra对开发者要求比较高，因为需要从0开始，比如状态管理、路由管理、webpack等都需要自己配置，对初学者来说难度有点大，别给自己挖坑了还是，可以使用umi，umi基本上不需要额外配置。当然，老手随便。

dva

• 是一个基于 redux 和 redux-saga 的数据流方案。对于学习来说，这是个不错的框架，源码也很短，不过从github上能看出来，维护度有点低，虽然有很多项目基于纯dva开发，不过也不是很建议初级开发者使用这个做公司项目，因为还是需要你自己去做很多配置，要求也比较高。当然，老手随便。

umi

• 可扩展的企业级前端应用框架。深度整合了Antd和dva，内置了路由、构建、部署、测试等，仅需一个依赖即可上手开发。并且还提供针对 React 的集成插件集，内涵丰富的功能，可满足日常很多的开发需求。当然缺点也很明显，他什么都给你封装好了，如果你还想自己写webpack，那就不要选择umi了。老少皆宜。

next

• 挺好的。只是如果你不会国际化、权限、数据流、配置式路由等问题，还是不要用了。

组件库

Antd

• 蚂蚁的，使用很广泛，风格素雅简洁。

Antd-Mobile

• 用于移动端，比Antd差很多，不过最近正在重构，期待吧。