有一个方法需要在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