【React】什么是react？react主要能做什么？

最新推荐文章于 2023-07-21 08:47:04 发布

猫兮ぃCatci

最新推荐文章于 2023-07-21 08:47:04 发布

阅读量3.9k

点赞数 2

本文链接：https://blog.csdn.net/qq_45587822/article/details/104563096

版权

React来源于facebook的一个开源项目，目前在建造大型网站时十分通用。

1.Facebook为什么要建造React?

Facebook的工程师在做大型项目时，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解,所以Facebook认为MVC不适合大规模应用，当系统中有很多的模型和相应的视图时，其复杂度就会迅速扩大，非常难以理解和调试，特别是模型和视图间可能存在的双向数据流动。

基于上面的原因，Facebook认为MVC无法满足他们的扩展需求，为了解决上述问题需要“以某种方式组织代码，使其更加可预测”，于是他们提出的Flux和React来实现。

2.什么是React？

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

React 是一个用于构建用户界面的JavaScript 库。React主要用于构建UI，很多人认为 React 是 MVC 中的 V（视图）。React 拥有较高的性能，代码逻辑非常简单，越来越多的人已开始关注和使用它。

3.React能够解决什么问题？

React能够构建那些数据会随时间改变的大型应用，并且能够提高开发效率

4.React 特点

声明式设计 −React采用声明范式，可以轻松描述应用。
高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX是 JavaScript语法的扩展。React开发不一定使用 JSX，但我们建议使用它。
组件 − 通过 React构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

5.React主要的原理

传统的web应用，操作DOM一般是直接更新操作的，但是我们知道DOM更新通常是比较昂贵的。而React为了尽可能减少对DOM的操作，提供了一种不同的而又强大的方式来更新DOM，代替直接的DOM操作。就是VirtualDOM,一个轻量级的虚拟的DOM，就是React抽象出来的一个对象，描述dom应该什么样子的，应该如何呈现。通过这个Virtual DOM去更新真实的DOM，由这个Virtual DOM管理真实DOM的更新。

为什么通过这多一层的Virtual DOM操作就能更快呢？这是因为React有个diff算法，更新VirtualDOM并不保证马上影响真实的DOM，React会等到事件循环结束，然后利用这个diff算法，通过当前新的dom表述与之前的作比较，计算出最小的步骤更新真实的DOM。

最明显的一点好处就是React所谓的 dom diff ，能够实现delta级别的dom更新。当有数据变动导致DOM变动时，React不是全局刷新，而是通过它内部的dom diff 算法计算出不同点，然后以最小粒度进行更新。这也是React号称性能好的原因。

6.Components 组件

在DOM树上的节点被称为元素，在这里则不同，Virtual DOM上称为commponent。Virtual DOM的节点就是一个完整抽象的组件，它是由commponents组成。component的使用在 React 里极为重要, 因为 components 的存在让计算 DOM diff 更高效。

7.应用范围

国外应用的较多，facebook、Yahoo、Reddit等。在github可以看到一个列表Sites-Using-React：https://github.com/facebook/react/wiki/Sites-Using-React国内的话，查了查，貌似比较少，目前知道的有一个杭州大搜车。大多技术要在国内应用起来一般是较慢的。

8.比较分析

和其他一些js框架相比，比如Backbone、Angular等，React怎样?

1、React不是一个MVC框架，它是构建易于可重复调用的web组件，侧重于UI, 也就是view层

2、其次React是单向的从数据到视图的渲染，非双向数据绑定

3、不直接操作DOM对象，而是通过虚拟DOM通过diff算法以最小的步骤作用到真实的DOM上。

4、不便于直接操作DOM，大多数时间只是对 virtual DOM 进行编程

9.和React Native的关系

由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来Web 开发的主流工具。

这个项目本身也越滚越大，从最早的UI引擎变成了一整套前后端通吃的 Web App 解决方案。衍生的 React Native 项目，目标更是宏伟，希望用写Web App 的方式去写 Native App。如果能够实现，整个互联网行业都会被颠覆，因为同一组人只需要写一次 UI ，就能同时运行在服务器、浏览器和手机。

10.react的状态

React组件免不了不停的要与用户互动,一开始有一个初始状态，然后在与用户互动的过程中，用户的每个动作都可能触发状态机的变化，新的状态由不同的 React 元素展现。React 的一大创新,就是将组件看成是一个状态机State Machines,当状态发生改变时, React会在最有效的方式下更新DOM,重新渲染页面,让用户界面和数据保持一致。

10.1state工作原理

10.1.1存储状态

React在this.state中存储组件的状态

10.1.2设置状态的初始值

有两种设置 this.state初始值的方法：
如果创建组件使用 React.createClass方式,就用getInitialState方法初始化状态，例如

　　var scoreComponent=React.createClass({

    getInitialState:function(){

    return{

    score:0

    };

    }

    ......

    });

　//如果创建组件是使用 ES6的 extends React.Component方法，在构造器中使用this.state初始化状态。例如：

class scoreComponent extends React.Component{

    constructor(props){

    super(props);

    this.state ={score:60};

        }

10.1.3 改变组件状态的方法

使用this.setState(data,callback)改变状态的值,这个方法可以把 data合并到 this.state，并且重新渲染了组件。data参数可以是对象也可以是返回包含要更新字段的对象的函数。可选的 callback会在组件重渲染后被调用。this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

10.1.4 state应该包含什么样的数据

UI交互会导致改变的数据。

10.1.5 state不应包含什么样的数据

1、计算过的数据
2、组件
3、从props复制的数据
state应保含最原始的数据，比如说时间，格式化应该交给展现层去做。
组件应在render方法里控制。

10.2state的开发实例

10.2.1计算点击次数

<!DOCTYPE html>

<html>

  <head>

    <meta charset="UTF-8" />

    <title>React状态机</title>

 <script type="text/javascript" src="js/react.min.js" ></script>

 <script type="text/javascript" src="js/react-dom.min.js" ></script>

 <script type="text/javascript" src="js/browser.min.js" ></script>

  </head>

  <body>

    <p id="example"></p>

    <script type="text/babel">

      var BtnButton = React.createClass({

        getInitialState: function() {

          return {count: 0};

        },

        handleClick: function(event) {

          this.setState({count:this.state.count+1});

        },

        render: function() {

          var text =this.state.count ;

          return (

            <p onClick={this.handleClick}>

              获取点击的次数<br />

                 <span>{text}</span>

            </p> 

          );

        }

      });

      ReactDOM.render(

        <BtnButton />,

        document.getElementById('example')

      );

    </script>

  </body>

</html>

以上实例中创建了BtnButton 组件，getInitialState 方法用于定义初始状态，也就是一个对象，这个对象可以通过 this.state 属性读取。当用户点击组件，导致状态变化，this.setState 方法就修改状态值，每次修改以后，自动调用 this.render 方法，再次渲染组件。

11.JSX

11.1什么是JSX？

在用React写组件的时候，通常会用到JSX语法，粗看上去，像是在Javascript代码里直接写起了XML标签，实质上这只是一个语法糖，每一个XML标签都会被JSX转换工具转换成纯Javascript代码，当然你想直接使用纯Javascript代码写也是可以的，只是利用JSX，组件的结构和组件之间的关系看上去更加清晰。

var MyComponent = React.createClass({/*...*/});

var myElement = <mycomponent someproperty="{true}">;

React.render(myElement, document.body);

</mycomponent>

一个XML标签，比如会被JSX转换工具转换成什么呢？

比如：

var Nav = React.createClass({/*...*/});

var app = <nav color="blue"><profile>click</profile></nav>;

转化为：

var Nav = React.createClass({/*...*/});

var app = React.createElement(

 Nav,

 {color:"blue"},

 React.createElement(Profile, null, "click")

);

那么也就是说，我们写一个XML标签，实质上就是在调用React.createElement这个方法，并返回一个ReactElement对象。

ReactElement createElement(

 string/ReactClass type,

 [object props],

 [children ...]

)

这个方法的第一个参数可以是一个字符串，表示是一个HTML标准内的元素，或者是一个ReactClass类型的对象，表示我们之前封装好的自定义组件。第二个参数是一个对象，或者说是字典也可以，它保存了这个元素的所有固有属性（即传入后基本不会改变的值）。从第三个参数开始，之后的参数都被认作是元素的子元素。

11.2 JSX转换器

要把带有JSX语法的代码转化为纯Javascript代码，有多种方式，对于内联与HTML中的代码或者是未经过转化的外部文件，在script标签中要加上type=“text/jsx”，并引入JSXTransformer.js文件即可，不过这种方式并不建议在生产环境使用，建议的方法是在代码上线前就将代码转换好，可以使用npm全局安装react-tools：

npm install -g react-tools

并使用命令行工具转化即可（具体用法可以参考jsx -h）：

jsx src/ build/

如果使用自动化工具，比如gulp的话，可以使用相应插件gulp-react。

11.3HTML模板中使用JS

在HTML模板中使用JS非常方便，只需要用大括号把JS代码括起来即可。

var names = ['Alice', 'Emily', 'Kate']; 

  

React.render( 

<div> 

{ 

names.map(function (name) { 

return <div>Hello, {name}!</div> 

}) 

} 

</div>, 

document.getElementById('example') 

);

编译出来就变成了这样：

var names = ['Alice', 'Emily', 'Kate']; 

React.render( 

 React.createElement("div", null, names.map(function (name) { 

 return React.createElement("div", null, "Hello, ", name, "!") 

 }) ), 

 document.getElementById('example') 

);

要注意的是，大括号实际就是一个变量输出表达式，JSX最终就是直接把花括号中的内容作为 React.createElement 的第三个参数直接传入了（没有任何修改直接传入），所以其中只能放一行表达式，并且任何不能直接作为第三个参数的写法都是错的，那么你这样写就是错的：

React.render( 

<div> 

{ 

var a = 1; 

names.map(function (name) { 

return <div>Hello, {name}!</div> 

}) 

} 

</div>, 

document.getElementById('example') 

);

因为很明显其中花括号内的内容直接放在第三个参数上，语法不对。

这么写也是错的：

React.render( 

<div> 

{ 

var a = 1; 

  

} 

</div>, 

document.getElementById('example') 

);

因为 React.createElement(“div”, null, var a = 1;) 是语法错误。
那么你也可以理解为什么大括号中的js表达式不能有分号结尾了吧。

需要注意的是，如果你在属性中输出JS变量，是不能加引号的，不然会被当做字符串而不被解析。
应该是这样：

<a title="{title}">链接</a>

11.4使用HTML标签

要创建一个HTML标准中存在的元素，直接像写HTML代码一样即可：

var myDivElement = <div classname="foo">;

React.render(myDivElement, document.body);

</div>

不过需要注意的是class和for这两个属性，JSX语法最终是要被转换为纯Javascript的，所以要和在Javascript DOM中一样，用className和htmlFor。

还有一点是，在创建HTML标准内的元素时，JSX转化器会丢弃那些非标准的属性，如果一定要添加自定义属性，那么需要在这些自定义属性之前添加data-前缀。

<div data-custom-attribute="foo">

</div>

11.5命名空间式组件

比如开发组件的时候，一个组件有多个子组件，你希望这些子组件可以作为其父组件的属性，那么可以像这样用：

var Form = MyFormComponent;

 

var App = (

 <form>

 <form.row>

  <form.label>

  <form.input>

 </form.input></form.label></form.row>

 </form>

);

这样你只需将子组件的ReactClass作为其父组件的属性：






var MyFormComponent = React.createClass({ ... });

 

MyFormComponent.Row = React.createClass({ ... });

MyFormComponent.Label = React.createClass({ ... });

MyFormComponent.Input = React.createClass({ ... });

而创建子元素可以直接交给JSX转化器：

var App = (

 React.createElement(Form, null,

  React.createElement(Form.Row, null,

   React.createElement(Form.Label, null),

   React.createElement(Form.Input, null)

  )

 )

);

该功能需要0.11及以上版本

11.6Javascript表达式

在JSX语法中写Javascript表达式只需要用{}即可，比如下面这个使用三目运算符的例子：

// Input (JSX):

var content = <container>{window.isLoggedIn ? <nav> : <login>};

// Output (JS):

var content = React.createElement(

 Container,

 null,

 window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)

);

</login></nav></container>

不过要注意的是，JSX语法只是语法糖，它的背后是调用ReactElement的构造方法React.createElement的，所以类似这样的写法是不可以的：

// This JSX:

<div id="{if" (condition)="" {="" 'msg'="" }}="">Hello World!</div>

 

// Is transformed to this JS:

React.createElement("div", {id: if (condition) { 'msg' }}, "Hello World!");

可以从转化后的Javascript代码中看出明显的语法错误，所以要不用三目运算符，要不就这样写：

if (condition) <div id="msg">Hello World!</div>

else <div>Hello World!</div>

11.7传播属性（Spread Attributes）

在JSX中，可以使用…运算符，表示将一个对象的键值对与ReactElement的props属性合并，这个…运算符的实现类似于ES6 Array中的…运算符的特性。

var props = { foo: x, bar: y };

var component = <component {="" ...props="" }="">;

</component>

这样就相当于：

var component = <component foo="{x}" bar="{y}">

</component>

它也可以和普通的XML属性混合使用，需要同名属性，后者将覆盖前者：

var props = { foo: 'default' };

var component = <component {...props}="" foo="{'override'}">;

console.log(component.props.foo); // 'override'

</component>

猫兮ぃCatci

关注

2
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
【React】什么是react？react主要能做什么？

React来源于facebook的一个开源项目，目前在建造大型网站时十分通用。1.Facebook为什么要建造React?Facebook的工程师在做大型项目时，由于他们非常巨大的代码库和庞大的组织，使得MVC很快变得非常复杂，每当需要添加一项新的功能或特性时，系统的复杂度就成级数增长，致使代码变得脆弱和不可预测，结果导致他们的MVC正在土崩瓦解,所以Facebook认为MVC不适合大规模应用...
复制链接

扫一扫