当前位置：编程学堂 > React入门教程

React入门教程

发布：2023-09-30 15:20

-->

React 源自 Facebook 内部项目。它是一个用于构建用户界面的 Javascript 库。相当于MVC架构中的V层框架。与市场上的其他框架不同，React 将每个组件视为一个状态机。，组件内部使用状态来维护组件状态的变化。当组件状态发生变化时，React 使用虚拟 DOM 技术来增量、高效地更新真实 DOM。本文将简单介绍一下React的这些特性。

你好反应

考虑到有些同学还没有了解React，我们先写一个简单的React组件，方便大家快速看一下！

//创建HelloReact组件
var HelloReact = React.createClass({
渲染：函数（）{
返回(

你好反应！

)
}
}); //使用HelloReact组件
ReactDOM.render(
,
document.querySelector('body')
)

这定义了一个 React 组件。当然，运行这段代码是有条件的。需要引入React库和JSX语法转换库。这里我就不详细说了。这些基本的东西还是需要你自己去练习。那太棒了！

虚拟DOM（虚拟DOM）

在前端开发过程中，我们经常做的一件事就是将变化的数据实时更新到UI。这时候就需要更新 DOM 并重新渲染，而频繁的 DOM 操作通常是性能瓶颈。原因之一是有时候我们会遇到这样尴尬的情况：比如有一个数据列表。当用户执行刷新操作时，Ajax会重新向后台请求数据，即使新请求的数据与上次完全一样。，DOM也会被完全更新并重新渲染，这会产生不必要的性能开销。

React 为此引入了虚拟 DOM（Virtual DOM）机制：对于每个组件，React 都会在内存中构建对应的 DOM 树。基于React开发时，所有的DOM构建都是通过虚拟DOM来进行的。当组件的状态发生变化时，React会重构整个DOM数据，然后将当前整个DOM树与之前的DOM树进行比较，获取DOM结构发生变化的部分（Patch），然后将这些Patch更新到真实的DOM。整个过程在内存中执行，因此非常高效。借一张图可以清楚的表示出虚拟DOM的工作机制：

React 生命周期

React将每个组件作为状态机来维护和管理，因此每个组件都有一个完整的生命周期，大致可以分为三个过程：初始化、更新和销毁。生命周期中的每个过程都清晰地反映了组件的状态变化。对于开发来说，很容易掌握组件的各个状态，在不同状态时期做相应的事情，互不干扰。以下是与组件生命周期相关的几种方法：

getDefaultProps

获取初始状态

组件将安装

组件DidMount

componentWillReceiveProps

shouldComponentUpdate

组件将更新

componentDidUpdate

组件将卸载

初始化

对于外部系统来说，组件是一个独立的封闭系统。内部逻辑被隐藏，只对外暴露传递数据的接口。 React 为我们提供了两种向组件传递数据的方式，即 props 和 state。

props在调用ReactDOM.render()时通过标签属性xxx传递，然后通过www.sychzs.cn获取。 getDefaultProps 允许您为组件设置默认的 props 值，并在没有传递 props 的情况下显示默认值。价值。

//创建HelloReact组件
var HelloReact = React.createClass({
/**
* 设置props默认值时，不通过时显示默认值
* @return {}
*/
getDefaultProps:function(){
返回{
data:"暂无数据"
}
},
渲染：函数（）{
返回(

//显示数据，当props改变时会自动更新
{www.sychzs.cn}

)
}
});//传递props属性数据
ReactDOM.render(
,
document.querySelector('body')
)

与props的区别在于state不能外部传递，所以在使用state之前，需要在getInitialState中为state设置一个默认值，然后在组件挂载时可以通过www.sychzs.cn来访问。，触发ComponentDidMount方法，我们可以通过Ajax请求服务器数据，然后通过setState()将状态值设置为真实数据。

//创建HelloReact组件
var HelloReact = React.createClass({
/**
* 设置组件初始值
* @returns {{数据：数组，消息：字符串}}
*/
getInitialState:function(){
返回{
data: "数据加载中..." //初始值为[]
}
},
/**
* 安装后首次加载数据
*/
componentDidMount:function(){
this.requestData();//请求数据
},
/**
* 请求后台数据
*/
请求数据：函数（）{
$.ajax({
url:'xxxx.ashx',
数据：{},
成功：函数（数据）{
this.setState({
data:data //通过setState()更新服务器数据
})
}
}.bind(this))
},
渲染：函数（）{
返回(

{这个.状态.数据}

)
}
});
ReactDOM.render(
,
document.querySelector('body')
)

更新

props 属性是只读的。如果想改变props的值，只能通过重新调用render()来传递新的props。但需要注意的是，重新执行render()时组件不会被重新挂载。，而是通过虚拟DOM技术进行增量更新和渲染。此时，也会触发 componentWillReceiveProps 方法，并将新的 props 作为参数传递。您可以在这里处理新的道具。

与 props 相比，state 本质上是用来反映组件的状态，因此它的值是可以改变的。当state的值改变时，可以通过setState来改变state的值。 React 还使用虚拟 DOM。技术用于计算需要更新的部分，而不是涉及整个更新和渲染。

当 props 和 state 的状态发生变化时，组件会在更新之前触发一个名为 shouldConponentUpdate 的方法。如果shouldConponentUpdate返回true，无论props和state的值较上次是否发生变化，React都会诚实地进行比较。这时候，如果你确定并且确定两次之间数据没有发生变化，那么让shouldConponentUpdate返回false，React就不会进行diff，更不会重新渲染。瞬间节省了diff的时间。

摧毁

当组件从 DOM 中移除时，React 会销毁该组件。在销毁之前，细心的 React 还会触发 componentWillUnmount 来通知你，看看你对即将销毁的组件有什么话要说。当然，如果你没事做的话就不需要。

道具和状态

我们已经知道数据可以通过 props 和 state 传递给组件。 props 是只读的，不能更改，而 state 用于反映组件的状态，可以更改。因此，当组件需要的数据在调用时就确定了并且不经常改变时，可以使用props来传递。相反，当调用时无法确定组件所需的数据时，需要等待异步回调才能确定。，比如ajax请求数据，输入onchange事件，那么就需要用state来记录和改变这些值的变化。

原创发布@一像素2016

-->