React 高级指南小记
接上篇,还是笔记,还是干货。
深入 JSX
如果使用 JSX 表达式 <Foo />
,Foo
必须在范围内,因为这些标签被编译为对指定变量的直接引用。
由于 JSX 编译为对 React.createElement()
的调用,因此 React 库必须始终在 JSX 代码的作用域中。
可以使用 JSX 中的点表示法来引用 React 组件。如果有一个模块导出很多 React 组件,这很方便。
用户定义的组件必须以大写开头。
当构建通用容器时,扩展属性可能很有用。然而,扩展属性很容易将大量不相关的属性传递给不关心它们的组件。建议谨慎使用扩展属性。
在包含开始标记和结束标记的 JSX 表达式中,这些标记之间的内容作为特殊的属性 this.props.children
传递。
React 组件不能返回多个 React 元素,但是一个 JSX 表达式可以有多个子元素。因此,如果想要一个组件呈现多个元素,可以将它包装在 div
中。
传递给自定义组件的子项可以是任何东西,只要该组件将它们转换为 React 在渲染之前可以理解的东西即可。
一些“假”值,仍然会被 React 渲染。
使用 PropTypes 进行类型检查
出于性能原因,仅在开发模式下检查 propTypes。
Refs 和 DOM
ref 属性接受一个回调函数,回调将在组件被挂载或卸载后立即执行。
当组件装载时,React 将使用 DOM 元素调用 ref 回调,并在卸载时用 null 调用它。
当在自定义组件上使用 ref 属性时,ref 回调接收组件的已装入实例做为其参数。
不受控制的组件
在大多数情况下,建议使用受控组件来实现表单。在受控组件中,表单数据由 React 组件处理。不受控组件的表单数据则是由 DOM 本身处理。
要编写不受控制的组件,而不是为每个状态更新编写事件处理程序,可以使用 ref 从 DOM 获取表单值。
由于不受控制的组件在 DOM 中保持真实源,因此,当使用不受控制的组件时,有时更容易集成 React 和非 React 代码。
优化性能
在某些情况下,可以通过重写生命周期函数 shouldComponentUpdate()
来提升性能,这是在重新呈现过程开始之前触发的。如果在某些情况下组件不需要更新,可以从 shouldComponentUpdate()
返回 false,以跳过整个渲染过程。
大多数时候,可以继承 React.PureComponent
而不是编写自己的 shouldComponentUpdate()
来进行浅比较。
如果仅仅是修改属性或状态内的实例的变量,而不是通过创建一个新的实例去覆盖它,那么 shouldComponentUpdate()
将不能正常工作。
Reconstruction
当根元素类型不同时,React 将拆除旧树并从头开始构建新树。
当 DOM 元素类型相同时,React 会查看两者的属性,保留相同的底层 DOM 节点,并仅更新更改的属性。当更新样式时,React 也知道只更新已更改的样式属性。处理 DOM 节点后,React 然后对子节点进行递归。
当组件元素类型相同时,实例保持不变,因此,在渲染之间维护状态。React 更新底层组件实例的属性以匹配新元素,并在底层实例上调用 componentWillReceiveProps()
和 componentWillUpdate()
。接下来调用 render()
函数,然后对子节点进行递归。
当对 DOM 节点的子节点进行递归时,React 只是同时迭代两个子节点列表,并在有差异时产生变化。当子节点有 key 时,React 使用键将旧树中的节点和新树中的节点进行匹配。
Context
通过组件树传递数据,不必在每个级别手动传递属性,可以在 React 中使用强大的 context API 来做到这一点。
绝大多数情况下不需要使用 context。
context 是一个实验性的 API,可能会在未来的版本中取消。
通常建议使用诸如 Redux 之类的状态管理库,而不是使用 context。
最后
源码:https://github.com/chnhyg/react-demo
React 高级指南小记的更多相关文章
- React高级指南
高级指南 1.深入JSX: 从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖. 因为 JSX 被编译为 ...
- 【译】高级指南-深入JSX
title: 高级指南-深入JSX date: 2017-4-5 17:13:09 --- 深入JSX 从根本上来讲,JSX 仅仅是提供 React.createElement(component, ...
- Linux网络设置高级指南
from:http://www.oschina.net/question/23734_117144 Linux网络设置高级指南 本文面向的是被Linux复杂的有线无线网络架构弄得头昏脑胀:或者被网上半 ...
- React Native指南汇集了各类react-native学习资源、开源App和组件
来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...
- React 快速入门小记
大约半个月前,我一直在思考一个问题,Angular.React 和 Vue,究竟该学什么? 听取了几位前辈的意见,也综合考虑了各方面的原因,最终选择了 React,希望我"没有选错" ...
- React高级特性
目录: 容器组件 JSX可展开属性 动画 : CSS3 Transition 默认属性 复用代码:mixin 容器组件 React元素也可以包含其他的子元素,这意味着响应的React组件是一个 容器组 ...
- React高级指引
深入JSX 本质上来讲,JSX是为React.createElement方法提供的语法糖 <MyButton color=}> Click Me </MyButton> 编译为 ...
- React高级教程(es6)——(1)JSX语法深入理解
从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比如: & ...
- [Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解
cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...
随机推荐
- Spark on Yarn:任务提交参数配置
当在YARN上运行Spark作业,每个Spark executor作为一个YARN容器运行.Spark可以使得多个Tasks在同一个容器里面运行. 以下参数配置为例子: spark-submit -- ...
- python入门到精通[二]:基础学习(1)
摘要:Python基础学习: 注释.字符串操作.用户交互.流程控制.导入模块.文件操作.目录操作. 上一节讲了分别在windows下和linux下的环境配置,这节以linux为例学习基本语法.代码部分 ...
- PAT自测_打印沙漏、素数对猜想、数组元素循环右移、数字加倍重排、机器洗牌
-自测1. 打印沙漏() 本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号 ...
- hasOwnProperty 递归 简单回调 链式调用
1.hasOwnProperty 函数的返回值为Boolean类型.如果对象object具有名称为propertyName的属性,则返回true,否则返回false. function Box(){ ...
- Excel 同时打开2个或多个独立窗口
首先win7版本点击[开始]菜单,在输入框里面输入"regedit.exe"打开注册表 然后定位找到该路径HKEY_CLASSES_ROOT \ Excel.Sheet.1 ...
- sprint 3 总结
1.要求: 演示可参考毕业设计答辩,包含两部分内容: 项目陈述,可综述项目.团队.开发过程等. 运行演示,实现的功能.业务.用户反馈等. 希望各组认真准备,拿出最好的阵容最好的状态,展示一学期的学习与 ...
- 在Eclipse 中使用tomcat8
最新版本的Eclipse让人不支持 Tomcat 8,该方法让Eclipse能使用Tomcat8 第一步:下载最新版本Eclipse for Java EE 第二步:到WTP downloads pa ...
- git commit 代码时提示: Warning: Your console font probably doesn‘t support Unicode.
git 提交代码是会遇到以下问题, git commit 代码时提示: Warning: Your console font probably doesn‘t support Unicode. If ...
- Eclipse版本android 65535解决方案(原理等同android studio现在的分包方式)
由于工作的需要看了下Eclipse下android65535的解决方案,查了好多文档,真心的发自内心的说一句请不要再拷贝别人的博客了,害人,真害人. 接下来我说下我的实现方式,首先说下65535的最可 ...
- swift基础:第二部分:函数和闭包
今天本来想利用上午的时间本来打算将swift基础部分学习完的,不巧的是,后台来和我讨论用户评价的接口,讨论过后,商讨出一种可行的方案,十几分钟时间过去了,我拿到将接口介入到已经完成的页面中,完美,终于 ...