您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
4.组件的状态state(组件内方法暴漏给console全局访问、bind的使用(设定方法体内this的指向)、forceUpdate强制更新的使用)
发布时间：2025-02-10 21:59:03编辑：雪饮阅读（）
-
首先我们来了解下react组件状态的机制，以及如何将组件暴漏为外部可以访问。如console可以访问。
完整示例如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
/*
* 在React 16.8之前状态管理是和组件一起使用的，在React 16.8之后状态管理是和组件分离的
* 我当前是16.1.0
* 所以这里需要用之前的组件的定义方式，而不是直接一个function就搞定的。
* */
class StateComponent extends React.Component{
constructor(props){
super(props);
this.state = {isVisible:true,titleMessage:'你好世界(来自state哦)'};
this.changeState = this.changeState.bind(this);
}
changeState(obj){
this.setState(obj);
}
componentDidMount() {
// 将方法暴露到console上
window.StateComponent=StateComponent;
window.StateComponent.changeState = this.changeState;
}
render(){
var style={
display:this.state.isVisible?'block':'none'
}
return (
<div>
<h1 style={style}>{this.state.titleMessage}</h1>
</div>
);
}
}
ReactDOM.render(<StateComponent/>, document.getElementById('app'),function(){
console.log("组件渲染完成");
});
</script>
</body>
</html>
然后控制台中你就可以用如：
StateComponent.changeState({titleMessage:"xxx"});
这样的方式来修改数据。
同样也可以这样
StateComponent.changeState({isVisible:false});
就可以让这个组件看不到了。
好像是更早之前直接可以“组件.state.属性”这种方式去修改，但是官方既然不建议，所以才修改成如今这样麻烦的。也就不纠结了。
我的意思是不能直接修改state的属性，而是要通过setState去修改。
例如上面的示例我修改成这样：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class StateComponent extends React.Component{
constructor(props){
super(props);
this.state = {isVisible:true,titleMessage:'你好世界(来自state哦)',count:0};
this.changeState = this.changeState.bind(this);
//bind的作用是让this指向当前组件，例如这里的changeState2方法体内部的this就是指向组件
this.changeState2 = this.changeState2.bind(this);
}
changeState(obj){
this.setState(obj);
}
changeState2(obj){
for(var i in obj){
this.state[i]=obj[i];
}
}
componentDidMount() {
// 将方法暴露到console上
window.StateComponent=StateComponent;
window.StateComponent.changeState = this.changeState;
window.StateComponent.changeState2 = this.changeState2;
}
render(){
var style={
display:this.state.isVisible?'block':'none'
}
return (
<div>
<h1 style={style}>{this.state.titleMessage}</h1>
<button onClick={()=>{this.state({isVisible:false})}}>click to me</button>
</div>
);
}
}
ReactDOM.render(<StateComponent/>, document.getElementById('app'),function(){
console.log("组件渲染完成");
});
</script>
</body>
</html>
那么控制台中执行如
StateComponent.changeState2({isVisible:false});
这样仍旧无法让页面中的当前组件隐藏。
StateComponent.changeState2({titleMessage:"xxxx"});
这样好像也是不能生效的。
除非你加上这个
this.forceUpdate();
即changeState2方法如：
changeState2(obj){
for(var i in obj){
this.state[i]=obj[i];
}
this.forceUpdate();
}
所以我们可以再次修改下，使得可以每次点击按钮对我们即将新增的count属性初始化为0进行增加。则完整如：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="bower_components/react/react.development.js"></script>
<script src="bower_components/react/react-dom.development.js"></script>
<script src="babel.min.js"></script>
<script type="text/babel">
class StateComponent extends React.Component{
constructor(props){
super(props);
this.state = {isVisible:true,titleMessage:'你好世界(来自state哦)',count:0};
this.changeState = this.changeState.bind(this);
this.changeState2 = this.changeState2.bind(this);
}
changeState(obj){
this.setState(obj);
}
changeState2(obj){
for(var i in obj){
this.state[i]=obj[i];
}
this.forceUpdate();
}
componentDidMount() {
// 将方法暴露到console上
window.StateComponent=StateComponent;
window.StateComponent.changeState = this.changeState;
window.StateComponent.changeState2 = this.changeState2;
}
render(){
var style={
display:this.state.isVisible?'block':'none'
}
return (
<div>
<h1 style={style}>{this.state.titleMessage}</h1>
<p>count:{this.state.count}</p>
<button onClick={()=>{this.setState({count:this.state.count+1})}}>click to me</button>
</div>
);
}
}
ReactDOM.render(<StateComponent/>, document.getElementById('app'),function(){
console.log("组件渲染完成");
});
</script>
</body>
</html>
关键字词：组件的状态state,组件内方法,console全局访问,bind的使用,this的指向,forceUpdate,强制更新