React Hooks学习笔记
看了一篇文章,也说清了 React 发展历程,我一直都坚信任何技术方案的出现都是为了以更好的方式解决问题。
React 组件发展历程
React 组件基本可以归结三个阶段:
- createClass Components
- Class Components
- Function Components
createClass Components
示例:
1 | const Index = React.createClass({ |
这是早期创建组建的方式,我想当时 JavaScript 还没有内置的类系统。当 ES6 到来的时候,这一切都改变了。
Class Components
示例:
1 | class Index extends React.Component { |
初始化属性及状态的方式随之发生了变化,这里或许会有疑问,createClass 用的好好地,为什么还要使用以 Class 继承的方式编写组件,我想应该是为了迎合 ES 的发展。
随着项目的的复杂度提升,如果项目中全部使用类的方式开发组件是不是有点重,这个时候它来了。
Function Components
示例:
1 | const Button = (props) => { |
我只是要封装个公共组件,用它就够。
夜黑风高夜,组件开发时……
想这种复合型组件就需要状态的介入,但是又犯不着使用类组件,因此诞生了 React Hooks
React Hooks 介绍
- useState()
- useContext()
- useReducer()
- useEffect()
useState
如果需要操作状态,代码如下:
1 | import React, { useState } from "react"; |
useContext
如果需要共享状态,代码如下:
1 | const AppContext = React.createContext({}); |
当共享状态组件嵌套时,当前的 context 值由上层组件中距离当前组件最近的 <AppContext.Provider> 的 value prop 决定。
useReducer
Redux 提供了状态管理方案,在这里你也可以使用 useReducer。
1 | const [state, dispatch] = useReducer(reducer, initialArg, init); |
借鉴了阮一峰老师的计数器实例:
1 | const myReducer = (state, action) => { |
useEffect
官方描述:Effect Hook 可以让你在函数组件中执行副作用操作。
1 | import React, { useState, useEffect } from "react"; |
这段代码是官方提供的,简洁明了。
官方在 Effect 方面介绍的很详细,强烈推荐大家详读。中文社区详解
自定义 Hooks
自定义的目的,是为了封装重复逻辑,共享逻辑,既然是自定义 Hooks,也不是简单函数封装,当然被封装的逻辑代码中也需要包含官方提供的 Hook 方案,方能凑效。中文社区详解
总结
刚开始在项目中使用,还未能深入使用,只能列举目前能用到的示例代码,自定义 Hooks,在我看来是对 Hooks 的组合封装。
参考文章:
React Hooks学习笔记
install_url
to use ShareThis. Please set it in _config.yml
.