react的函数有哪些？react函数的详细解析（附实例）
- 寻∝梦原创
- 2018-09-11 15:55:133143浏览
本篇文章主要讲述的就是关于react该如何学习的介绍，现在让我们一起来看文章的正文内容吧
React根本上其实就是一个JavaScript库。
它体现了前后分离的思想，将部分组装页面的工作转交给浏览器来完成；不像JSP文件，页面的布局和填入数据是在服务器完成后发送给浏览器的的。
这样做的好处自然有很多：首先，React将DOM&JavaScript封装成模块(组件)，这些组件的可复用性很强，不仅如此，组件也可以让测试和关注分离变得简单。其次，当数据变化的时候，React能够自动更新用户界面，并且仅更新需要更新的部分。
核心函数1:render
这个函数的功能就是提供一个模块，它就像是乐高玩具的一块积木，用来组装页面。
简单示例：（先给出的是html代码，后给出的是JSX代码。JSX就是JavaScript+XML的意思）
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/ReactDOM.render(
<p>Hello, world!</p>,
document.getElementsByClassName('firstContainer')[0]
);可以看到 class 为 firstContainer 的p的内容被替换掉了，替换成了我们在render中写入的代码：hello world！
另外document.getElementsByClassName(‘firstContainer’)[0]可以替换成任何原生的JavaScript获取**单独某一个（一定是一个Node，因此如果你使用document.getElementsByClassName这样的方法必须要加上[n]）**DOM元素的方法：document.getElementById或者document.getElementsByTagName等都可以。
更复杂一点的例子，我们可以来将这里的e388a4556c0f65e1904146cc1a846beeHello, world!94b3e26ee717c64999d7867364b1b4a3 扩充一下。
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/var name = "Emily";
ReactDOM.render(
<p>
{
(function(){ return <p>Hello, {name}!</p>
})()
}
</p>,
document.getElementById('container')
);我们可以看到JSX语法的神奇之处了，在代码中，JS和DOM可以说是混杂在一起的。而JSX 的基本语法规则：遇到 HTML 标签（以 < 开头），就用 HTML 规则解析；遇到代码块（以 { 开头），就用 JavaScript 规则解析。
核心函数2:React.createClass
这个函数允许我们自己定义需要的组件，定义好的组件可以作为像p这样的标签一样，直接应用于render函数中。
一个简单的栗子：
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/var HelloWorldBox = React.createClass({
render: function() { return (
<p className="helloWorldBox">
Hello, world! I am a helloWorldBox.
</p>
);
}
});
ReactDOM.render(
<HelloWorldBox />,
document.getElementById('container')
);在这个栗子里，HelloWorldBox就是一个最简单的组件。
关于这个组件，我们还可以获取更多信息。例如，使用props
（实例来自React官网）
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
render: function() { return (
<p className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</p>
);
}
});var CommentList = React.createClass({
render: function() { return (
<p className="commentList">
<Comment author="Pete Hunt">This is one comment</Comment>
<Comment author="Jordan Walke">This is *another* comment</Comment>
</p>
);
}
});
ReactDOM.render(
<CommentList />,
document.getElementById('container')
);在这个栗子中，我们使用React.createClass方法建立了两个组件，我们可以看到，在组件CommentList中，嵌套了Comment：也就是说，CommentList是由多个Comment组成的。我们在CommentList中为Comment定义了一个属性：author。那么，在Comment组件中，就可以通过{this.props.author}读到这个属性，而通过{this.props.children}，则可以读到这个组件的子节点。
接入外部数据：
<p id="container" class="firstContainer">
<p>replaced</p>
</p>/*************************************************/var Comment = React.createClass({
render: function() { return (
<p className="comment">
<h2 className="commentAuthor">
{this.props.author}
</h2>
{this.props.children}
</p>
);
}
});var names = ['Alice', 'Emily', 'Kate'];
ReactDOM.render(
<p>
{
names.map(function (name) { return <Comment author={name}>is an author~</Comment>
})
}
</p>,
document.getElementById('container')
);在这里，数组names是外部数据，我们通过建立组件，将这些数据嵌入了网页的DOM中。
组件state
每个组件都有一个属性：state，开发者可以通过调用this.setState()来改变组件的状态。当状态更新之后，组件就会重新渲染自己。state和props都是一个组件的特性，但是不同的是，props是不变的，但是state是可以改变的。
getInitialState()可以设置组件的初始化状态，这个函数在组件的生命周期中仅执行一次。
更新状态：
注：componentDidMount函数是组件的生命周期函数，它是一个在组件被渲染的时候React自动调用的方法，后面会详细讲到。
var CommentBox = React.createClass({
getInitialState: function() {
return {data: []};
},
componentDidMount: function() {
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data) {
this.setState({data: data});
}.bind(this),
error: function(xhr, status, err) {
console.error(this.props.url, status, err.toString());
}.bind(this)
});
},
render: function() {
return (
<p className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
</p>
);
}
});这个栗子中，我们通过ajax获取数据，并通过函数this.setState将获取的数据设置为this.state.data。然后，在CommentList中，设置data={this.state.data}，就可以将从服务器获取的数据显示出来。（想看更多就到PHP中文网React参考手册栏目中学习）
组件的生命周期
组件的生命周期分为如下三种：
Mounting：已插入真实 DOM
Updating：正在被重新渲染
Unmounting：已移出真实 DOM
在组件的生命周期中，有生命周期函数会被自动调用。它们分别是：
componentWillMount()componentDidMount()componentWillUpdate(object nextProps, object nextState)componentDidUpdate(object prevProps, object prevState)componentWillUnmount()
另外还有两个特殊状态的处理函数：
componentWillReceiveProps(object nextProps)：已加载组件收到新的参数时调用shouldComponentUpdate(object nextProps, object nextState)：组件判断是否重新渲染时调用
下面这个栗子来自于阮一峰大神的博客：
var Hello = React.createClass({
getInitialState: function () {
return {
opacity: 1.0
};
},
componentDidMount: function () {
this.timer = setInterval(function () {
var opacity = this.state.opacity;
opacity -= .05; if (opacity < 0.1) {
opacity = 1.0;
} this.setState({
opacity: opacity
});
}.bind(this), 100);
},
render: function () {
return (
<p style={{opacity: this.state.opacity}}>
Hello {this.props.name}
</p>
);
}
});
ReactDOM.render(
<Hello name="world"/>,
document.body
);componentDidMount函数在组件插入真实 DOM以后调用，在这个函数里，我们设置了一个定时器，每100毫秒改变一次透明度，直到组件完全透明后，将透明度再设置成1(初始的透明度设置为1)。这样，这个组件聚会不停在被渲染。这样，我们就在页面上得到了一个不停闪烁的hello world字符串。如果我们编写函数：
componentDidUpdate:function(){
console.log("did update");
}我们就可以在控制台看到不断的输出。
React根本上其实就是一个JavaScript库。
它体现了前后分离的思想，将部分组装页面的工作转交给浏览器来完成；不像JSP文件，页面的布局和填入数据是在服务器完成后发送给浏览器的的。
这样做的好处自然有很多：首先，React将DOM&JavaScript封装成模块(组件)，这些组件的可复用性很强，不仅如此，组件也可以让测试和关注分离变得简单。其次，当数据变化的时候，React能够自动更新用户界面，并且仅更新需要更新的部分。
本篇文章到这就结束了（想看更多就到PHP中文网React使用手册栏目中学习），有问题的可以在下方留言提问。
以上是react的函数有哪些？react函数的详细解析（附实例）的详细内容。更多信息请关注PHP中文网其他相关文章！