一文带你了解反应的回调渲染模式

2。子组件框架

进口反应,{组件,proptype} & # 39;反应# 39;
　　进口fetchUser & # 39; twitter # 39;//fetchUser用户名返回一个承诺//将解决与用户名# 39;年代数据。
　　类Twitter扩展组件{//完成这个
　　}

3。子组件具体实现

进口反应,{组件,proptype} & # 39;反应# 39;;
　　进口fetchUser & # 39; twitter # 39;;
　　类Twitter扩展组件{
　　状态={
　　用户:空,
　　}
　　静态proptype={
　　用户名:PropTypes.string.isRequired,
　　}
　　componentDidMount () {
　　fetchUser (this.props.username)。然后(用户=比;this.setState ({user}));
　　}
　　呈现(){
　　返回this.props.children (this.state.user);
　　}
　　}

这种模式的优势在于将父组件与子组件解耦和,父组件可以直接访问子组件的内部状态而不需要再通过道具传递,这样父组件能够更为方便地控制子组件展示的UI界面。譬如产品经理让我们将原本展示的徽章替换为概要文件,我们可以轻易地修改下回调函数即可: