詳解React的回調(diào)渲染模式

更新時間：2020年09月10日 14:05:47 作者：黃東璐

這篇文章主要介紹了詳解React的回調(diào)渲染模式，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、一個簡單的小例子

1.父組件

<Twitter username='tylermcginnis33'>
 {(user) => user === null
  ? <Loading />
  : <Badge info={user} />}
</Twitter>

2.子組件框架

import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
// fetchUser take in a username returns a promise
// which will resolve with that username's data.
class Twitter extends Component {
 // finish this
}

3.子組件具體實現(xiàn)

import React, { Component, PropTypes } from 'react';
import fetchUser from 'twitter';
class Twitter extends Component {
 state = {
  user: null,
 }
  static propTypes = {
  username: PropTypes.string.isRequired,
 }
  componentDidMount() {
  fetchUser(this.props.username).then(user => this.setState({user}));
 }
  render() {
  return this.props.children(this.state.user);
 }
}

這種模式的優(yōu)勢在于將父組件與子組件解耦和，父組件可以直接訪問子組件的內(nèi)部狀態(tài)而不需要再通過 Props 傳遞，這樣父組件能夠更為方便地控制子組件展示的 UI 界面。譬如產(chǎn)品經(jīng)理讓我們將原本展示的 Badge 替換為 Profile，我們可以輕易地修改下回調(diào)函數(shù)即可：

<Twitter username='tylermcginnis33'>
 {(user) => user === null
  ? <Loading />
  : <Profile info={user} />}
</Twitter>

到此這篇關(guān)于詳解React的回調(diào)渲染模式的文章就介紹到這了,更多相關(guān)React 回調(diào)渲染內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

React 錯誤邊界組件的處理
這篇文章主要介紹了React 錯誤邊界組件的處理，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
react native實現(xiàn)監(jiān)控手勢上下拉動效果
這篇文章主要為大家詳細(xì)介紹了react native實現(xiàn)監(jiān)控手勢上下拉動效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-05-05
react.js 父子組件數(shù)據(jù)綁定實時通訊的示例代碼
本篇文章主要介紹了react.js 父子組件數(shù)據(jù)綁定實時通訊的示例代碼，
2017-09-09
React高階組件使用教程詳解
高階組件就是接受一個組件作為參數(shù)并返回一個新組件（功能增強(qiáng)的組件）的函數(shù)。這里需要注意高階組件是一個函數(shù)，并不是組件，這一點一定要注意，本文給大家分享React 高階組件HOC使用小結(jié)，一起看看吧
2022-12-12
React中g(shù)etDefaultProps的使用小結(jié)
React中的getDefaultProps功能允許開發(fā)者為類組件定義默認(rèn)屬性,提高組件的靈活性和容錯性,本文介紹了getDefaultProps的作用、語法以及最佳實踐,并探討了其他替代方案,如函數(shù)組件中的默認(rèn)參數(shù)、高階組件和ContextAPI等,理解這些概念有助于提升代碼的可維護(hù)性和用戶體驗
2024-09-09
React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法
這篇文章主要介紹了React子組件調(diào)用父組件方法獲取的數(shù)據(jù)不是最新值的解決方法,文中通過代碼示例介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下
2024-09-09
react navigation中點擊底部tab怎么傳遞參數(shù)
本文主要介紹了react navigation中點擊底部tab怎么傳遞參數(shù),文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2023-04-04
關(guān)于React狀態(tài)管理的三個規(guī)則總結(jié)
隨著 JavaScript 單頁應(yīng)用開發(fā)日趨復(fù)雜,JavaScript 需要管理比任何時候都要多的 state （狀態(tài)）,這篇文章主要給大家介紹了關(guān)于React狀態(tài)管理的三個規(guī)則,需要的朋友可以參考下
2021-07-07
react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面
這篇文章主要介紹了react-native聊天室|RN版聊天App仿微信實例|RN仿微信界面,需要的朋友可以參考下
2019-11-11
React受控組件與非受控組件實例分析講解
具體來說這是一種react非受控組件，其狀態(tài)是在input的react內(nèi)部控制，不受調(diào)用者控制?？梢允褂檬芸亟M件來實現(xiàn)。下面就說說這個React中的受控組件與非受控組件的相關(guān)知識，感興趣的朋友一起看看吧
2023-01-01