接上篇,还是笔记,还是干货。

深入 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 高级指南小记的更多相关文章

  1. React高级指南

    高级指南 1.深入JSX: 从本质上讲,JSX 只是为 React.createElement(component, props, ...children) 函数提供的语法糖. 因为 JSX 被编译为 ...

  2. 【译】高级指南-深入JSX

    title: 高级指南-深入JSX date: 2017-4-5 17:13:09 --- 深入JSX 从根本上来讲,JSX 仅仅是提供 React.createElement(component, ...

  3. Linux网络设置高级指南

    from:http://www.oschina.net/question/23734_117144 Linux网络设置高级指南 本文面向的是被Linux复杂的有线无线网络架构弄得头昏脑胀:或者被网上半 ...

  4. React Native指南汇集了各类react-native学习资源、开源App和组件

    来自:https://github.com/ele828/react-native-guide React Native指南汇集了各类react-native学习资源.开源App和组件 React-N ...

  5. React 快速入门小记

    大约半个月前,我一直在思考一个问题,Angular.React 和 Vue,究竟该学什么? 听取了几位前辈的意见,也综合考虑了各方面的原因,最终选择了 React,希望我"没有选错" ...

  6. React高级特性

    目录: 容器组件 JSX可展开属性 动画 : CSS3 Transition 默认属性 复用代码:mixin 容器组件 React元素也可以包含其他的子元素,这意味着响应的React组件是一个 容器组 ...

  7. React高级指引

    深入JSX 本质上来讲,JSX是为React.createElement方法提供的语法糖 <MyButton color=}> Click Me </MyButton> 编译为 ...

  8. React高级教程(es6)——(1)JSX语法深入理解

    从根本上来说,JSX语法提供了一种创建React元素的语法糖,JSX语句可以编译成: React.createElement(component, props, …children)的形式,比如: & ...

  9. [Web 前端] React高级教程(es6)——(2)对于Refs最新变动的理解

    cp : https://blog.csdn.net/liwusen/article/details/53384561 1.什么是ReactJS中的refs 在React中组件并不是真实的 DOM 节 ...

随机推荐

  1. 数据结构看书笔记(二)--算法(Algorithm)简介

    算法:是解决问题求解步骤的描述,在计算机中表现为指令的有限序列,并且每条指令表示一个或多个操作. 算法的特性:算法具有五个特性:输入.输出.有穷性.确定性.可行性 输入输出:算法具有零个或多个输入:至 ...

  2. front-end plugin, generate pdf with html5 and jquery

    http://www.jqcool.net/jquery-jspdf.html[from this site] <html> <head></head> <s ...

  3. [原创]java WEB学习笔记104:Spring学习---AOP 前奏,通过一个问题引入动态代理

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  4. android 使用shape来优化界面效果

    看下效果图: <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android=&quo ...

  5. 搭建S3C6410开发板的测试环境

      因为ARM架构的开发板可基于X86架构的PC在CPU指令以及二进制上都有所不同,而且如果linux驱动需要访问硬件,这些硬件很难在PC上模拟,所以就需要我们在带有这些硬件的开发板上进行调试和测试. ...

  6. 在Ubuntu 12.04下采用apt-get的方法安装Qt4

    在Ubuntu 12.04下采用apt-get的方法安装Qt4 注:之前发表的一篇博客是采用编译源码的方式安装Qt4,这是很有用的方式,因为源码安装对于所有系统都是通用的,其次,在使用交叉编译器的时候 ...

  7. DEV全选多选小技巧

    var v1 = bindingSourceBase.DataSource as DataTable; foreach (DataRowView v in v1.DefaultView) { v[&q ...

  8. PHP日常开发工具-Sublime应用

    工欲善其事,必先利其器.这里我推荐Sublime Text3做为PHP编辑器,以下简称为ST3,因为不仅系统资源占用小.打开快速,并且还有如下优点: 插件多,类似Emmet信手拈来,非常顺手. UI很 ...

  9. [Android] 转-LayoutInflater丢失View的LayoutParams

    原文地址:http://lmbj.net/blog/layoutinflater-and-layoutparams/ View view = inflater.inflate(R.layout.ite ...

  10. 【笔记】科普createDocumentFragment() 创建文档碎片节点

    上一篇文章说到了动态添加文本节点的方法那如果我们要添加多个文本节点或者元素节点呢? 大家可能会想到用循环然后逐个逐个添加 但是别忘了js 还提供了创建一个文本碎片的方法 createDocumentF ...