React
react 技术栈,主要由 react + (react-router、react-redux、react-saga)+ ant-design 组成。
以 hooks 方式为主。
相关技术文档:
- react - React 官方文档
- React 基础相关知识
- dva 目前使用频率在减少了
- TypeScript 使用率逐渐提高
- ahooks 或 react-use
- lodash
真香定律(国内技术发展潜规则):国外流行 -> 国内大厂尝试 -> 大厂觉得很香 -> 其它公司觉得也很香。
推荐文档:
技术栈组成简析
创建 React 项目
状态管理
- 用 useState/useReducer 处理共享状态。
- 选择性使用 useContext 管理某些全局状态。
- 用 Redux管理全局状态,react-saga/redux-thunk。
- 如果你想拥有和 Vue.js 一样的开发体验,建议看看 Mobx。
远程数据请求
路由
组件库
- Material UI (MUI)(国际最流行)
- Ant Design(国内最流行)
类型检查
- PropTypes
- TypeScript
代码风格
- ESLint
- Prettier
富文本编辑
时间处理
PC 客户端
移动端
原型设计
16 之后版本更新记录变化
react16
- React 16 采用了称为“Fiber”的全新的内部架构。官方对 Fiber 的一句话解释是“React Fiber 是对核心算法的一次重新实现
- render 方法能够返回数组了 //但是要使用 key
ReactDOM.createPortal
//新增了一个顶级 API- setState 传入 null 时不会再触发更新
componentDidCatch(error, info)
的生命周期函数,你可以定义组件的错误处理函数,这样组件在遇到运行时错误时会像增加了try...catch
一样,不会将错误直接抛出了,错误被局部组件 catch 住,保证了整个应用的可用性。- react 是 5.3kb(gzip:2.2kb),之前是 20.7kb(gzip:6.9kb)
- react-dom 是 103.7kb(gzip:32.6kb),之前是 141kb(gzip:42.9kb)
- react + react-dom 是 109kb(gzip:34.8kb),之前是 161.7kb(gzip:49.8kb)
react 16.3
React.createContext()
,这样就创建了两个组件:- 标记为不安全
componentWillMount、componentWillReceiveProps、componentWillUpdate
- 要被废弃的方法:
- componentWillMount--使用 componentDidMount 代替
- componentWillUpdate--使用 componentDidUpdate 代替
- componentWillReceiveProps--使用一个新的方法:
static getDerivedStateFromProps
来代替。 - 全新的 Context API。(Provider Consumer)
- 使用了
React.createRef
取得 Ref 对象this.myRef = React.createRef()
React.Fragment
和 DocumentFragment 类似
react 16.4
- Pointer Events
- react 异步渲染
- React DOM:修复在某些情况下阻止上下文传播的错误;
- React DOM:改进
forwardRef()
和 context consumers 在组件堆栈中的显示方式; - React DOM:当
forwardRef()
渲染函数具有 propTypes 或 defaultProps 时发出警告; - React Test Renderer:修复
getDerivedStateFromProps()
支持以匹配新的 React DOM 行为 - 使用 createPortal 将组件渲染到当前组件树之外
生命周期调整:https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
React 16.6
- lazy 最让人期待的功能肯定就是 lazy 功能了,配合发布了一个 Suspense 组件,也就是最开始命名为 Placeholder 的组件,用来配合 render 方法内部的异步操作的,让我们先来看一下 lazy 的用法
React.memo
方法,来实现类似 PureComponent 的功能,即浅比较 props 是否有变化,如果没有变化,就不重新渲染当前组件static getDerivedStateFromError()
- StrictMode 是用来提醒开发者用了即将被废弃的 API 的,像 componentWillMount 这些声明周期都会提醒,这次新加了两个 API 的提醒,
ReactDOM.findDOMNode()
,和老的 context api - static contextType 通过声明
static contextType = context
,让 ClassComponent 可以订阅最近的一个 context provider,注意这里 contextType 是固定声明,换成别的名字都不行。如果 ConsumerComp 不在 Provider 的子树中,那么会使用 defaultValue
React v16.7
- React 提供了一些内置 Hook
React v16.8
- hooks 可以让你在不编写类的情况下使用 state 和 React 的其他功能。你还可以构建自己的 hooks,在组件之间共享可重用的有状态逻辑。
- useState 函数式更新。会保存其当时状态,usememo 记录优化 类似 pureComponent。
- useCallback 本质上是添加了一层依赖检查。它以另一种方式解决了问题 - 我们使函数本身只在需要的时候才改变,而不是去掉对函数的依赖。
- useReducer
- useContext 接收一个 context 对象(
React.createContext
的返回值)并返回该 context 的当前值 - useLayoutEffect:useEffect 相同,但它会在所有的 DOM 变更之后同步调用 effect
React v17.0
- React 17 的版本是非比寻常的,因为它没有添加任何面向开发人员的新功能。而主要侧重于升级简化 React 本身
- 更改事件委托
React 官方版本历史记录
后续版本请移步官方版本历史记录。