React 初探

levy9527 发布于2019-08-21 12:05 / 1329人阅读

摘要：各个组件维护自己的状态和，当状态变更，自动重新渲染整个组件。形式的定义的组件是以的形式来创建的组件的，是目前极为推荐的创建有状态组件的方式，最终会取代形式相对于可以更好实现代码复用。组件名称首字母必须大写。变量名用包裹，且不能加双引号。

目前在前端开发领域，框架Angular、react和vue占据着主流的地位而且可能会持续比较长的一段时间。三门框架中，从数据绑定机制来看，vue和angular采用了双向数据绑定的MVVM模式，而react虚拟Dom没有双向数据绑定机制，需要通过API来实现input的双向场景。下面主要对react的一些特性和使用进行分析。
一、一切都是组件

1 组件本质
React 的核心思想是：封装组件。各个组件维护自己的状态和 UI，当状态变更，自动重新渲染整个组件。
基于这种方式的一个直观感受就是我们不再需要不厌其烦地来回查找某个 DOM 元素，然后操作 DOM 去更改 UI。

2 创建组件方式
(1)函数式定义的无状态组件
function HelloComponent(props, / context /) { return

Hello {props.name}

} ReactDOM.render(, mountNode)
(2)es5原生方式React.createClass定义的组件
React.createClass是react刚开始推荐的创建组件的方式，这是ES5的原生的JavaScript来实现的React组件。
(3)es6形式的extends React.Component定义的组件
React.Component是以ES6的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，最终会取代React.createClass形式；相对于React.createClass可以更好实现代码复用。

二、react的生命周期
在react中触发render的四种方式为：
• 首次渲染Initial Render
• 调用this.setState （并不是一次setState会触发一次render，React可能会合并操作，再一次性进行render）
• 父组件发生更新（一般就是props发生改变，但是就算props没有改变或者父子组件之间没有数据交换也会触发render）
• 调用this.forceUpdate

三、react虚拟Dom技术
1 传统的页面开发，或多或少会牵扯到dom操作，而进行dom操作时，就会有相应的各种优化策略来尽可能地减少页面重新布局和重绘的次数。
2 比如下面dom批量更新的优化就主要有三种：
1 使用documentFragment进行dom批量更新，然后一次性更新到document上
2 克隆你将要更新的node，在克隆的node上进行dom批量更新，然后克隆的node和原始的node进行交换
3 先隐藏将要更新的node,然后进行dom批量更新，最后重新显示隐藏的node
传统的这种手工的批量更新复杂且易错，而React的虚拟DOM技术让我们远离了这种复杂，我们无需再时刻考虑何时以及如何做DOM性能调优。

基于React进行开发时所有的DOM构造都是通过虚拟DOM进行，每当数据变化时，React会产生以下情况：触发相应组件render方法；重新构建新的虚拟DOM树；将当前新的虚拟DOM树和上一次的旧树进行对比；得到DOM结构的区别，计算出最小变化集，进行实际的浏览器DOM更新（批量更新）。
尽管每一次都需要构造完整的虚拟DOM树，但是因为虚拟DOM是内存数据，性能是极高的，而对实际DOM进行操作的仅仅是Diff部分，因而能达到提高性能的目的。这样，在保证性能的同时，开发者将不再需要因某个数据的变化而考虑如何更新到一个或多个具体的DOM元素，无需再写额外的代码来做性能优化，将之完全交给React类库来做，而我们只需要关心在相应数据状态下如何实现相应组件的render方法即可，使得开发简单。
那么使用了虚拟DOM技术的React性能到底如何呢，到底是徒有虚名还是货真价实呢，接下来我们来看看React和其他一些流行框架的性能比较。

四、React小结
1 ReactJs是基于组件化的开发，所以最终你的页面应该是由若干个小组件组成的大组件。
2 可以通过属性，将值传递到组件内部，同理也可以通过属性将内部的结果传递到父级组件(留给大家研究)；要对某些值的变化做DOM操作的，要把这些值放到state中。
3 为组件添加外部css样式时，类名应该写成className而不是class;添加内部样式时，应该是style={{opacity: this.state.opacity}}而不是style="opacity:{this.state.opacity};"。
4 组件名称首字母必须大写。
5 变量名用{}包裹，且不能加双引号。

海外云主机 GPU服务器初探webrtc webrtc技术初探初探腾讯云存储网关 SQL存储过程初探

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/87427.html

解读React源码(一):初探React源码

摘要：前言的基本概念组件的构建方法以及高级用法这背后的一切如何运转深入内部的实现机制和原理初探源码代码组织结构包含一系列的工具方法插件包含一系列同构方法包含一些公用或常用方法如等包含一些测试方法等包含一些边界错误的测试用例是代码的核心部分它包含了前言 React的基本概念,API,组件的构建方法以及高级用法,这背后的一切如何运转,深入Virtual DOM内部的实现机制和原理. 初探Rea...

Eminjannn 2019-08-20 18:31 评论0 收藏0
React 初探

摘要：各个组件维护自己的状态和，当状态变更，自动重新渲染整个组件。形式的定义的组件是以的形式来创建的组件的，是目前极为推荐的创建有状态组件的方式，最终会取代形式相对于可以更好实现代码复用。组件名称首字母必须大写。变量名用包裹，且不能加双引号。目前在前端开发领域，框架Angular、react和vue占据着主流的地位而且可能会持续比较长的一段时间。三门框架中，从数据绑定机制来看，vue和an...

trilever 2019-08-01 17:32 评论0 收藏0
react-redux初探理解

摘要：它的作用就是像它的名字那样，建立一个从外部的对象到组件的对象的映射关系。比如表示从整个的表示当前组件容器的用来建立组件的参数到方法的映射比如表示它定义了哪些用户的操作应该当作，传给。最近做的项目加入了react-redux,对react-redux一直没理解透彻，最近有时间把react-redux梳理了一番，希望能够帮助到大家，首先有这几个文件，action,reducer,sag...

ziwenxie 2019-08-22 16:47 评论0 收藏0
初探react技术栈（一）

摘要：相信用的同学也不少找到函数在其中中添加启用编译。。。react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or c...

刘玉平 2019-05-23 16:23 评论0 收藏0
初探React技术栈（一）

react 最近已经开始使用react技术栈了，从头开始搭建项目，有必要的记录一下配置的过程以及项目分层的思路，这次后台项目采用的主要采用react-create-app脚手架以及Ant DesignUI 以及多语言react-intl create-react-app 这是官方维护的脚手架应用我们一般也采用这个 $ npm or cnpm $ npm install create-react...

neroneroffy 2019-08-26 13:53 评论0 收藏0