第七章 React组件API

来源：互联网发布：周有贵seo教程编辑：程序博客网时间：2024/05/19 16:47

在React中，常见的React组件API包含如下：
1、设置状态：setState
2、替换状态：replaceState
3、强制更新：forceUpdate
要调用组件上的API，首先需要获取对组件的引用。在组件方法内部可以通过this访问，在组件外唯一访问组件方法就是通过React.render的返回值，在其它组件内访问组件，可以使用refs获得对组件的引用。
需要注意的是，在新版本的react中，props 一旦创建，永远不可修改，因此 .setProps 及 .replaceProps 已废弃。
一、设置状态API：setState(object nextState[, function callback])
参数含义：
1、nextState：将要设置的新状态，该状态会和当前的state合并
2、callback，回调函数,可选参数。该函数会在setState设置成功，且组件重新渲染后调用。
功能：
合并nextState和当前state，下一次事件循环时this.state 的对应键就会被更新为该设定的值，并重新渲染组件。setState是React事件处理函数中和请求回调函数中触发UI更新的主要方法，一旦state发生改变并触动了绑定的逻辑，那么UI内容自然也会跟着变动。
需要注意的是，可以在 shouldComponentUpdate 方法中获取到 nextState 的值。另外，setState()并不会立即改变this.state，而是创建一个即将处理的state。setState()并不一定是同步的，为了提升性能React会批量执行state和DOM渲染。
实例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React组件API</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var ClickCounter = React.createClass({
getInitialState: function() {
return {
clickCount: 0
};
},
handleClickFun: function() {
this.setState(function(state) {
return {
clickCount: this.state.clickCount + 1
};
});
},
shouldComponentUpdate:function(nextProps, nextState){
console.log("状态值即将改变为:"+nextState.clickCount);
return true
},
componentDidUpdate: function(){
console.log('componentDidUpdate')
},
render: function() {
return(<div onClick = {this.handleClickFun}>当前点击次数为:
{
this.state.clickCount
} </div>);
}
});
ReactDOM.render(<ClickCounter / > ,
document.getElementById("hello")
);
</script>
</body>
</html>
二、替换状态API：replaceState (object nextState[, function callback])
参数含义：
1、nextState：将要替换的新状态，该状态会替换当前的state。
2、callback，回调函数,可选参数。该函数会在replaceState设置成功，且组件重新渲染后调用。
功能：
replaceState 就是一个彻底更换掉 state 的方法，使用的时候需要小心，避免删掉一些重要的state属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React组件API</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var ClickCounter = React.createClass({
getInitialState: function() {
return {
abc:12,//这里初始化了一个 state.abc
clickCount: 0
};
},
handleClickFun: function() {
this.replaceState({
clickCount:1
},function(){
//执行后，发现this.state中已经没有abc
console.log(this.state)
}
);
},
shouldComponentUpdate:function(nextProps, nextState){
console.log("abc状态值即将改变为:"+nextState.abc+" "+nextState.clickCount);
return true
},
componentDidUpdate: function(){
console.log('componentDidUpdate')
},
render: function() {
return(<div onClick = {this.handleClickFun}>当前值变为:
{
this.state.clickCount
} </div>);
}
});
ReactDOM.render(<ClickCounter / > ,
document.getElementById("hello")
);
</script>
</body>
</html>
控制台执行结果为：

需要注意的是，我们发现原来在 getInitialState 里还额外定义了一个 abc 的 state 属性，但在 replaceState 后再试着打印 this.state，会发现这个 state.abc 已经被删除了，见上图。如果换成 setState 则不会被删除，这也是它们之间的一个重要区别。
三、强制渲染API:forceUpdate([callback（function）])
参数含义：
1、callback，回调函数,可选参数。注意该方法的回调，也是在重新渲染之后才执行的。
功能：forceUpdate()方法会使组件调用自身的render()方法重新渲染组件，只要调用，都会强制渲染组件。具体体现在下面两个方面：
1、 shouldComponentUpdate 返回了false。
2、不以 props 或 state 来作为触发渲染的条件。使用了一个变量来作为UI内容，在该变量的值改变了且我们希望触发渲染时，可以使用该方法，当然这是不推荐的。
一般来说，应该尽量避免使用forceUpdate()，而仅从this.props和this.state中读取状态并由React触发render()调用。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>React组件API</title>
<script src="js/react.min.js"></script>
<script src="js/react-dom.min.js"></script>
<script src="js/browser.min.js"></script>
</head>
<body>
<div id="hello"></div>
<script type="text/babel">
var ClickCounter = React.createClass({
getInitialState: function() {
return {
clickCount: 0
};
},
handleClickFun: function() {
this.setState(function(state) {
return {
clickCount: this.state.clickCount + 1
};
});
this.forceUpdate(function(state) {
console.log("强制渲染！")
});

},
shouldComponentUpdate:function(nextProps, nextState){

return false
},
componentDidUpdate: function(){
console.log('componentDidUpdate')
},
render: function() {
return(<div onClick = {this.handleClickFun}>强制渲染
{

} </div>);
}
});
ReactDOM.render(<ClickCounter / > ,
document.getElementById("hello")
);
</script>
</body>

</html>

0 0