React是Facebook推出的面向视图层开发的一个框架,用于解决大型应用,包括如何很好地管理DOM结构,是构建大型,快速Web app的首选方式。

React使用JavaScript来构建用户界面,因此可以说是一个用来构建用户界面的JavaScript库。

1、为什么使用 React?

React 是为了解决一个问题:构建随着时间数据不断变化的大规模应用程序。

1)简单:仅仅只要表达出应用程序在任一个时间点应该呈现的样子,当底层的数据变了,React会自动处理所有用户界面的更新。

2)声明式:数据变化后,与点击“刷新”按钮类似,但仅会更新变化的部分。

3)构建可组合的组件:React构建可复用的组件,事实上通过React唯一要做的事情就是构建组件,这得益于其良好的封装性,组件使代码复用、测试和关注分离更加简单。

2、对React认识的误区

1) React不是一个完整的MVC框架,最多是MVC中的V(View),甚至并不非常认可MVC开发模式;

2) React和Web Component不能相提并论,两者并不是完全的竞争关系,完全可以用React去开发一个真正的Web Component;

3) React不是一个新的模板语言,没有JSX的React也能工作。

3、React的原理

在Web开发中,总需要将变化的数据实时反应到用户界面上,这就需要对DOM进行操作。而复杂或频繁的DOM操作通常是性能瓶颈产生的原因。

React为此引入了虚拟DOM的机制:在浏览器端用JavaScript实现一套DOM API。基于React,所有的DOM操作都通过虚拟DOM进行,每当数据变化时,React都会重新构建整个DOM树,然后将目前的整个DOM树和上次的DOM树进行对比,得到DOM树的区别,仅仅将变化的部分进行浏览器DOM更新。尽管每一次都要重新完整的虚拟DOM树,但因为虚拟DOM是内存数据,性能极高,而对实际DOM操作的仅仅是Diff部分,因此能达到提高性能的目的。此外,React能批处理虚拟DOM的刷新,在一个事件循环内的两次数据变化会被合并,如连续的先将节点内容从x变成y,然后又从y变成x,React会认为UI不发生任何变化。总之,在保证性能的同时,开发者将不再需要关注数据的变化如何更新到实际的DOM元素,而只需要关心在任意一个数据状态下,整个界面是如何render的,每做一点界面的更新,都可以认为刷新了整个页面,至于如何进行局部更新以保证性能,则是React框架要完成的事情。

以视频聊天应用为例:当收到一条新消息时,传统的开发过程需要知道是哪条数据,如何将新的DOM结点添加到当前DOM树上;而基于React,永远只需要关心数据整体,两次数据之间的UI如何变化,然后可以完全交给React框架去做,这大大降低了逻辑复杂性和开发难度,产生Bug的概率也更小。

有关虚拟DOM的详细介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/71171567

4、组件化

React以组件的方式去重新思考用户界面的构成,将用户界面上每一个功能相对独立的模块定义成组件,然后将小组件通过组合或嵌套的方式构成大组件,最终完成整体UI的构建。

MVC开发模式的思想:将模型—视图—控制器定义成不同的类,实现表现,数据,控制的分离。

组件化开发模式的思想:用户界面功能模块间的分离,完全是一个新思路,从功能的角度出发,将用户界面分成不同的组件,每个组件都独立封装。

1) 组件的特征:

① 可组合:一个组件可以包含其它组件,也可以嵌套在另一个组件内部。也就是说,一个复杂的UI可以拆分成多个简单的UI组件;

② 可重用:每个组件都是具有独立功能的,可用于多个场景;

③ 可维护:每个小组件仅包含自身的逻辑,更容易被维护。

2) 组件的属性:

① 组件名称首字母必须大写;

② 变量名用{}包裹,不能加双引号;

③ 获取属性的值:this.props.属性名;

④ 为元素添加css的class:className;

⑤ 设置组件的style属性:style={{width: this.state.witdh}}。

3) 组件的状态

React的一大创新,是将组件看成一个状态机。

① 设置一个初始状态:getInitialState(),注意:getInitialState()函数必须有返回值,可以是NULL或一个对象;

② 访问状态属性的值:this.state.属性名;

③ 更新状态,触发重新渲染用户界面:this.setState()。

4) 组件的生命周期

组件的生命周期分成三个状态:

① Mounting:已插入真实DOM

② Updating:正在被重新渲染

③ Unmounting:已移除真实DOM

React 为每个状态都提供了两种处理函数,will函数在进入状态之前调用,did函数在进入状态之后调用,共计五种处理函数:

① componentWillMount()

② componentDidMount()

③ componentWillUpdate(object nextProps, object nextState)

④ componentDidUpdate(object prevProps, object prevState)

⑤ componentWillUnmount()

此外,React 还提供两种特殊状态的处理函数:

① componentWillReceiveProps(object nextProps):已加载组件收到新的参数时调用

② shouldComponentUpdate(object nextProps, object nextState):组件判断是否重新渲染时调用

有关组件的生命周期的详细介绍请见:http://blog.csdn.net/zhouziyu2011/article/details/71172783

5) 组件的嵌套

React是基于组件化的开发,组件化开发最大的优点是复用。实现复用的方式之一便是组件嵌套。

var MyBox = React.createClass({
render: function() {
return (
<div>
用户名:<Input type="text"></Input><br/>
密码:<Input type="password"></Input>
</div>
);
}
});
var Input = React.createClass({
render: function() {
return (
<input type={this.props.type} />
);
}
});
ReactDOM.render(
<MyBox />,
document.getElementById('content')
);

5、JSX语法

HTML直接写在JavaScript中,不加任何引号,就是JSX的语法,允许HTML与JavaScript的混写。

JSX允许直接在模板插 JavaScript变量。如果该变量是一个数组(直接的JavaScript数组或通过map()、filter()等返回的数组),则会展开数组的所有元素。

1) 直接的JavaScript数组:

var arr = [
<p key="1">Alice</p>,
<p key="2">Bruce</p>
];
ReactDOM.render(
<div>{arr}</div>,
document.getElementById('content')
);
2) 通过map()返回的数组:

var arr = ['Alice','Bruce'];
ReactDOM.render(
<div>
{
arr.map(function(item, index) {
return <p key={index}>{item}</p>
})
}
</div>,
document.getElementById('content')
);

6、显示数据

React让显示数据变得简单,当数据变化时,用户界面会自动同步更新。可以认为React组件就是简单的函数,接受 props 和 state作为参数,然后渲染出HTML。

var HelloWorld = React.createClass({
render: function() {
return (
<div>
<input type="text" placeholder="Please enter your name!" />
{this.props.date.toString()}
</div>
);
}
});
setInterval(function() {
ReactDOM.render(
<HelloWorld date={new Date()} />,
document.getElementById('timeBox')
);
}, 1000);
React在用户界面中只改变了时间,任何在输入框输入的内容一直保留,React已经完成这个功能,不需要额外写任何代码。

限制:React组件只能渲染单个根节点,若想返回多个节点,它们必须被包含在同一个节点里。

注意:React中可以使用jQuery,但render()方法的第二个参数必须使用JavaScript原生的getElementById()方法,不能使用jQuery来获取DOM节点。
---------------------

原文:https://blog.csdn.net/zhouziyu2011/article/details/70664968

浅谈React编程思想的更多相关文章

  1. 【转】浅谈React、Flux 与 Redux

    本文转自<浅谈React.Flux 与 Redux>,转载请注明出处. React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化 利用 props 形成 ...

  2. 浅谈React

    浅谈react react是什么?其官网给出了明确定义:A JavaScript library for building user interfaces,一个用于构建用户界面的JavaScript库 ...

  3. 浅谈Socket编程

    浅谈Socket编程 说到Socket,想必大家会觉得陌生又熟悉.许多同学听说过Socket,但仅仅知道它翻译成中文叫做套接字,除此之外似乎并没有太多的了解了.那么今天我就来抛砖引玉地聊一聊Socke ...

  4. 浅谈React工作原理

    浅谈React工作原理:https://www.cnblogs.com/yikuu/p/9660932.html 转自:https://cloud.tencent.com/info/63f656e0b ...

  5. 浅谈React数据流管理

    引言:为什么数据流管理如此重要?react的核心思想就是:UI=render(data),data就是我们说的数据流,render是react提供的纯函数,所以用户界面的展示完全取决于数据层.这篇文章 ...

  6. 浅谈react的初步试用

    现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Face ...

  7. 浅谈React虚拟DOM

    为什么要使用虚拟DOM 因为浏览器的DOM渲染是非常消耗性能的,很低效,我们使用虚拟DOM是为了提高DOM的渲染性能: 什么是虚拟DOM 虚拟DOM就是把真实的DOM树通过createElement转 ...

  8. 浅谈 React、Flux 与 Redux

    React React 是一个 View 层的框架,用来渲染视图,它主要做几件事情: 组件化利用 props 形成单向的数据流根据 state 的变化来更新 view利用虚拟 DOM 来提升渲染性能 ...

  9. React 编程思想翻译及学习笔记

    第一步:把UI图按组件层次结构拆分开 FilterableProductTable (橙色): 包含整个例子 SearchBar (蓝色): 接收所有用户输入 ProductTable (绿色): 基 ...

随机推荐

  1. 利用select/poll监听多个设备详解

    如果一个应用程序去处理多个设备,例如应用程序读取网路数据,按键,串口,一般能想到的有三种方法: 方法1:串行+阻塞的方式读取:while(1) { read(标准输入);read(网络);}缺点:每当 ...

  2. 关于qemu的二三事(1)————qemu的特殊参数之monitor

    qemu作为一个十分重要的虚拟化工具,提供了丰富的功能/参数来支持虚拟化的各种操作. 下面仅就monitor这个参数或者说是功能来结合自己的实际体验来做个简要介绍. 如何进入qemu的monitor模 ...

  3. 杀死Linux中的defunct进程(僵尸进程)的方法指南

    杀死Linux中的defunct进程(僵尸进程)的方法指南_LINUX_操作系统_脚本之家https://www.jb51.net/LINUXjishu/457748.html 这样能看到僵尸进程.

  4. 算法名称 Alias Method

    public class AliasMethod { /* The probability and alias tables. */ private int[] _alias; private dou ...

  5. vue---使用Class

    在用vue-cli开发项目的时候,很多时候会用到类.具体的使用方法: config.js(使用类,还可以定义构造函数) class config { /** * 构造函数 * @param {stri ...

  6. 【翻译】Flink Table Api & SQL —Streaming 概念 —— 查询配置

    本文翻译自官网:Query Configuration  https://ci.apache.org/projects/flink/flink-docs-release-1.9/dev/table/s ...

  7. MyBatis插入记录时返回主键id的方法

    有时候插入记录之后需要使用到插入记录的主键,通常是再查询一次来获取主键,但是MyBatis插入记录时可以设置成返回主键id,简化操作,方法大致有两种. 对应实体类: public class User ...

  8. [LeetCode] 437. Path Sum III 路径和 III

    You are given a binary tree in which each node contains an integer value. Find the number of paths t ...

  9. .Net Core 定时任务TimeJob

    转载自:https://blog.csdn.net/u013711462/article/details/53449799 定时任务 Pomelo.AspNetCore.TimedJob Pomelo ...

  10. public interface ICloneable

    using System.Runtime.InteropServices; namespace System{ // // 摘要: // 支持克隆,即用与现有实例相同的值创建类的新实例. [ComVi ...