首页 > 有什么办法可以让react中的组件手动强制重新渲染?

有什么办法可以让react中的组件手动强制重新渲染?

有一个方法需要在componentDidMount阶段绑定,如果我想调用这个方法,只能是重新渲染一遍整个组件,在componentDidMount阶段调用;
有什么方法可以手动使这个组件重新渲染?


在一般情况下,如果Component的props或state发生改变,组件的render方法会被执行,React根据render返回结果与之前的结果比较,最后更新DOM。

在React中,没有强制的说法,一般有这种想法说明用法有问题。React只对props和state感兴趣。把你的问题往这两个属性上靠。


首先,重新渲染组件并不会再次触发 componentDidMount,而是改走 componentWillReceiveProps -> shouldComponentUpdate -> componentWillUpdate -> render -> componentDidUpdate 这个 lifecircle。首先要明确你想要调用这个方法干什么,如果这个方法是为了去 setState,从而改变一些状态,你可以使用 ref。

class Demo extends React.Component {
    handleClick() {
        // 假设你那个方法是 fetchData
        this.refs.custom.fetchData({});
    }
    render() {
        return (
            <div>
                <Custom ref="custom" />
                <button onClick={this.handleClick.bind(this)}>获取数据</button>
            </div>
        )
    }
}

另外一个思路是,更新 prop 之后调用这个方法重新setState,那么可以在 componentWillReceiveProps 这个生命周期里完成。

class Custom extends React.Component {
    componentDidMount() {
        this.fetchData(this.props.xxx);
    }
    componentWillReceiveProps(nextProps) {
        if (nextProps.xxx !== this.props.xxx) {
            this.fetchData(nextProps.xxx)
        }
    }
    render() {
        return (
            <div>
               
            </div>
        )
    }
}

https://facebook.github.io/react/docs/component-api.html#forceupdate

【热门文章】
【热门文章】