React总结6:无状态组件
来源:互联网 发布:4k软件模糊 编辑:程序博客网 时间:2024/06/06 18:22
我们可以用纯粹的函数来定义无状态的组件(stateless function)
这种组件没有状态,没有生命周期,只是简单的接受 props 渲染生成 DOM 结构。无状态组件非常简单,开销很低,如果可能的话尽量使用无状态组件。
比如使用箭头函数定义:
const HelloMessage = (props) => <div> Hello {props.name}</div>;render(<HelloMessage name="John" />, mountNode);
因为无状态组件只是函数,所以它没有实例返回,这点在想用 refs 获取无状态组件的时候要注意.
我们都知道refs在要引用的 DOM 元素上面设置一个 ref 属性指定一个名称,然后通过 this.refs.name 来访问对应的 DOM 元素。
如果 ref 是设置在原生 HTML 元素上,它拿到的就是 DOM 元素,如果设置在自定义组件上,它拿到的就是组件实例,这时候就需要通过 findDOMNode 来拿到组件的 DOM 元素。
因为无状态组件没有实例,所以 ref 不能设置在无状态组件上,一般来说这没什么问题,因为无状态组件没有实例方法,不需要 ref 去拿实例调用相关的方法,但是如果想要拿无状态组件的 DOM 元素的时候,就需要用一个状态组件封装一层,然后通过 ref 和 findDOMNode 去获取。
阅读全文
0 0
- React总结6:无状态组件
- react-bits:无状态函数组件
- React无状态组件更新props时会失去焦点
- React学习笔记_无状态组件(Stateless Component) 与高阶组件
- react---react创建组件的三种方式以及区别:无状态组件、工厂模式、es6语法定义
- React 的无状态函数
- react 入门-创建组件(2)无状态功能函数法
- React总结2:React组件生命周期
- 深入理解React 组件状态(State)
- react组件状态的一点说明
- react状态提升 父子组件交互
- 如何制作无状态的ASP组件
- 如何制作无状态的ASP组件
- Flutter入门之无状态组件
- React子组件修改父组件的状态
- React Native常用组件样式总结
- React Native常用组件样式总结
- React 组件的三种写法总结
- 子集合问题
- git上传出现大文件问题
- win10系统64位安装xgboost 0.6方法
- OpenCV--图像的载入-显示-保存
- 【STM32小案例 03 】实现DHT11,BH1750,GP2Y与0.96寸OLED的动态显示
- React总结6:无状态组件
- 前台ajax传值到controller后,返回值中文乱码问题解决
- I/O多路复用之select学习总结
- 实现线程安全的几种方式
- 【c#】数据类型
- 颜色匹配 Matlab版本
- linux配置nginx部署环境
- Python线程的创建
- 夏夜--韩偓