react怎么强制刷新页面?

react强制页面刷新

使用this.forceUpdate()

在react中,state和props数据更新,就会重新render,但是当层级过深时,可能就不会触发渲染,这时候就要用到

this.forceUpdate();

默认情况下,当组件的state或props改变时,组件将重新渲染。如果你的render()方法依赖于一些其他的数据,你可以告诉React组件需要通过调用forceUpdate()重新渲染。

调用forceUpdate()会导致组件跳过shouldComponentUpdate(),直接调用render()。这将触发组件的正常生命周期方法,包括每个子组件的shouldComponentUpdate()方法。

forceUpdate就是重新render。有些变量不在state上,当时你又想达到这个变量更新的时候,刷新render;或者state里的某个变量层次太深,更新的时候没有自动触发render。这些时候都可以手动调用forceUpdate自动触发render

//Sub.js
class Sub extends React.Component{
    construcotr(){
        super();
        this.name = "yema";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return (<div>{this.name}</div>);
    }
}

App.js
class App extends React.Component{

    handleClick(){
        this.subRef.refChangeName("yemafuren");
    }
    render(){
        return (<div>
            <Sub ref={(sub)=>{this.subRef = sub;}} />
            <button onClick={this.handleClick}>click</button>
        </div>);
    }
}

扩展资料:

this.setState()

这是在事件处理函数中和请求回调函数中触发 UI 更新的主要方法。

一般情况下setState() 总是触发一次重绘,除非在 shouldComponentUpdate() 中实现了条件渲染逻辑。如果使用可变的对象,但是又不能在 shouldComponentUpdate() 中实现这种逻辑,仅在新 state 和之前的 state 存在差异的时候调用 setState() 可以避免不必要的重新渲染。

举例、代码段如下:

constructor(props) {
super(props);
this.state = {
                myName:'I am MyName!',
};
 
}
 
testFun(){
    this.setState({myName:'组件被刷新了'});
}
 
 
render() {
        ......
        <TouchableHighlight
          underlayColor='#4169e1'
          onPress={this.testFun.bind(this)}  
          >
            <Image
            source={require('./res/himi.png')}
            style={{width: 70, height: 70}}
            />
        </TouchableHighlight>
        ......
  )}

1. 在this.state中添加了一个 字符串变量 myName 用于Text 组件的文字显示

2. 自定义了一个 testFun 函数,用于 Touchable的回调处理,其中调用了this.setState 函数并修改了myName的数据

3. 在render中添加了一个高亮触摸组件,用于演示效果。

【注】假如有 a、b、c三个组件,b 是 a 的子组件,c是 b 的子组件,那么 b 中 setState 之后,b 和 c 会 rerender,而 a 不会。 因此建议大家可以把每个组件提供一个重绘接口,然后提供给其他组件调用。

this.setProps()

同一个节点上再次调用 React.render() 来更新根组件是首选的方式,也可以调用 setProps() 来改变组件的属性,触发一次重新渲染。

但是!此方法仅在根组件上面调用。也就是说,仅在直接传给 React.render() 的组件上可用,在它的子级组件上不可用。如果你倾向于在子组件上使用 setProps(),不要利用响应式更新,而是当子组件在 render() 中创建的时候传入新的 prop 到子组件中。

说的通俗一点:父组件不能直接修改 prop属性,只能父类在使用传入的时候进行设置。

相关推荐:react教程

以上就是react怎么强制刷新页面?的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » React 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏