React函数式组件Hooks开发
WHY
1.React 没有提供将可复用性行为“附加”到组件的途径（例如，把组件连接到 store）。
解决此类问题的方案：
一类：render props 和 高阶组件，需要重新组织你的组件结构。
如果你在 React DevTools 中观察过 React 应用，你会发现由 providers，consumers，高阶组件，render props 等其他抽象层组成的组件会形成“嵌套地狱”。
尽管我们可以在 DevTools 过滤掉它们，但这说明了一个更深层次的问题：React 需要为共享状态逻辑提供更好的原生途径。
可以使用 Hook 从组件中提取状态逻辑，使得这些逻辑可以单独测试并复用。Hook 使你在无需修改组件结构的情况下复用状态逻辑。 这使得在组件间或社区内共享 Hook 变得更便捷。
2.组件预编译会带来巨大的潜力
使用 class 组件会无意中鼓励开发者使用一些让优化措施无效的方案，而且class 也给目前的工具带来了一些问题。e.g：class 不能很好的压缩，并且会使热重载出现不稳定的情况。因此，推荐函数式
3.使用 Hook 其中一个目的就是要聚合功能模块，不被生命周期函数分割
比如useState实现值与setState的映射关系
比如effect解决 class 中生命周期函数经常包含不相关的逻辑，但又把相关逻辑分离到了几个不同方法中的问题。
函数式组件没有实例的概念，函数通过执行去渲染
//函数组件1.0
const Example = (props) => {// 你可以在这使用 Hookreturn <div />;
}//函数组件2.0
function MyFunctionalComponent() {// 你可以在这使用 Hookreturn <input />;
}class Parent extends React.Component {constructor(props) {super(props);this.textInput = React.createRef();}render() {// 这样没用！函数式组件根本就没有实例！return (<MyFunctionalComponent ref={this.textInput} />);}
}
Hook
是 React 16.8 的新增特性
在一些模块中包含了 React Hook 的稳定实现。
Hook 是能让你在函数组件中不编写 class 的情况下使用 state 以及其他的 React 特性。它们名字通常都以 use 开始
规定：
只能在函数最外层调用 Hook。不要在循环、条件判断或者子函数中调用。
只能在 React 的函数组件中调用 Hook。不要在其他 JavaScript 函数中调用。（还有一个地方可以调用 Hook —— 就是自定义的 Hook 中）
useEffect(function persistForm() {//
React函数式组件Hooks开发相关推荐
- React 函数式组件缓存原理
对 React 函数式组件缓存的思考 自从 React 16.8 版本推出 Hooks 用法以来,围绕函数组件的优化出现了各种不同的思考.本篇文章从 React 底层 Render 角度,分析 Rea ...
- [react] 函数式组件有没有生命周期？为什么？
[react] 函数式组件有没有生命周期?为什么? 没有生命周期 因为他没有继承React.Component 所以也不需要render() 个人简介 我是歌谣,欢迎和大家一起交流前后端知识.放弃很容 ...
- React.js组件化开发第一步(框架搭建)
开始前 安装 node.js; 安装 cnpm; 安装 yarn; 安装完成yarn后, 将镜像替换成国内的: $ yarn config set registry 'https://registry ...
- react函数式组件传值之父传子
今天我们主要说下react函数式组件如何进行父组件向子组件传值.在开发过程中,为了提高可读性或者复用性,我们会进行组件的拆分.先说下,我们在引入子组件时,子组件的名字一定要大写,否则会报错(这是个ba ...
- React基础（2）—— React函数式组件使用ref
React函数式组件使用ref ref ref的作用 ref用于获取DOM元素或子组件实例. useRef useRef作用 useRef用于返回一个可变的ref对象.这个refduix的curren ...
- React函数式组件
React组件:可以分为类组件和函数式组件 1.函数式组件中没有state 2.函数式组件中没有生命周期(重点,涉及到生命周期的方法只能在类组建中定义) 可以借助react提供的hooks在函数式组建 ...
- 【React+ts】从零开始搭建react函数式组件+router+redux+less+sass+axios反向代理+antd（保姆式教学）
前提 你需要准备好node.js版本不低于6.14.8 和 git 文章内容比较长(保姆级别教程),全是干货,请耐心看完 通过create-react-app脚手架搭建项目 1.第一步 注: 项目名称 ...
- React 函数式组件封装购物车（本文章对入门选手不是很友好）
分析说明: 注意:React 脚手架默认支持 sass,但是需要自己手动安装 sass 依赖包(用来解析 sass 语法)安装命令:yarn/npm add sass 步骤: 根据模板搭建基本页面结构 ...
- React心得之降龙十八掌：第二式-飞龙在天（ React组件化开发及相关概念）
引言 (乾卦九五)<彖>曰:"'飞龙在天',大人造也." 学习了上一章,想必我们对于React有了一个初步的认识,了解了什么是React.什么是JSX.模块与组件.组件 ...
- 函数式组件与类组件区别-心智模型
与React类组件相比,React函数式组件究竟有何不同? 区别:心智模型不同,函数式组件捕获了渲染所用的值. 函数式组件与类组件有何不同? - Overreacted他们是完全不同的宝可梦哦.htt ...
最新文章
- 任正非：管理就要铲除公司夹心层！
- 什么？程序员还要了解经济学？！
- 提高 TDD 效率的一些小诀窍
- .net读写 更新 删除(操作)xml文件
- php双层foreach,php 双层foreach 如何提升效率
- jmx jolokia_使用Jolokia和JMX进行客户端服务器监视
- leetcode练习——数组篇（1）（std::ios::sync_with_stdio(false);std::cin.tie(nullptr);）
- python汉诺塔_汉诺塔递归算法/搬金盘的婆罗门 - Python实现
- linux 远程桌面配置,linux 远程桌面的配置
- html标记语言图像标记_为什么我喜欢这些标记语言
- Beta 冲刺（2/7）
- python字符串反向输出_Python反向字符串– 5种方法和最佳方法
- Go -- go语言指针
- JSLIU 的 wxWindows 入门
- FlexSim仿真软件入门笔记：基本操作、快捷键
- 免费的HTTP代理IP服务器地址
- 武汉理工大学计算机辅助项目管理简答题,武汉理工大学软件项目管理实验报告...
- 六脉连环大总结，教你干趴Docker
- ensp 交换机与路由器ospf_华为三层交换机和路由器建立OSPF关系
- VBA基础知识整理（字典，自定义函数）
热门文章