這篇文章將為大家詳細(xì)講解有關(guān)React中如何傳入組件的props改變時(shí)更新組件的幾種實(shí)現(xiàn)方法，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)從2013年開始，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢想脫穎而出為使命，1280元鞍山做網(wǎng)站,已為上家服務(wù),為鞍山各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:028-86922220

何時(shí)使用派生狀態(tài)

咱們先來看一個(gè)比較常見的需求，一個(gè)用戶列表，可以新增和編輯用戶，當(dāng)用戶點(diǎn)擊‘新建'
按鈕用戶可以在輸入框中輸入新的用戶名；當(dāng)點(diǎn)擊‘編輯'按鈕的時(shí)候，輸入框中顯示被編輯的用戶名，用戶可以修改；當(dāng)用戶點(diǎn)擊‘確定'按鈕的時(shí)候用戶列表更新。

class UserInput extends React.Component {

 state = {
  user: this.props.user
 }

 handleChange = (e) => {
  this.setState({
   user: {
    ...this.state.user,
    name: e.target.value
   }
  });
 }

 render() {
  const { onConfirm } = this.props;
  const { user } = this.state;
  return (
   <div>
    <input value={user.name || ''} onChange={this.handleChange} />
    <button onClick={() => { onConfirm(user) }}>確定</button>
   </div>
  );
 }
}

class App extends React.Component {
 state = {
  users: [
   { id: 0, name: 'bruce' },
   { id: 1, name: 'frank' },
   { id: 2, name: 'tony' }
  ],
  targetUser: {}
 }

 onConfirm = (user) => {
  const { users } = this.state;
  const target = users.find(u => u.id === user.id);

  if (target) {
   this.setState({
    users: [
     ...users.slice(0, users.indexOf(target)),
     user,
     ...users.slice(users.indexOf(target) + 1)
    ]
   });
  } else {
   const id = Math.max(...(users.map(u => u.id))) + 1;
   this.setState({
    users: [
     ...users,
     {
      ...user,
      id
     }
    ]
   });
  }
 }

 render() {
  const { users, targetUser } = this.state;
  return (
   <div>
    <UserInput user={targetUser} onConfirm={this.onConfirm} />
    <ul>
     {
      users.map(u => (
       <li key={u.id}>
        {u.name}
        <button onClick={() => { this.setState({ targetUser: u }) }}>編輯</button>
       </li>
      ))
     }
    </ul>
    <button onClick={() => { this.setState({ targetUser: {} }) }}>新建</button>
   </div>
  )
 }
}

ReactDOM.render(<App />, document.getElementById('root'));

運(yùn)行后，效果如圖：

現(xiàn)在點(diǎn)擊‘編輯'和‘新建'按鈕，輸入框中的文字并不會(huì)切換，因?yàn)辄c(diǎn)擊‘編輯'和‘更新'時(shí)，雖然UserInput的props改變了但是并沒有觸發(fā)state的更新。所以需要實(shí)現(xiàn)props改變引發(fā)state更新，在UserInput中增加代碼：

 componentWillReceiveProps(nextProps) {
  this.setState({
   user: nextProps.user
  });
 }

或者

 static getDerivedStateFromProps(props, state) {
  return {
   user: props.user
  };
 }

這樣就實(shí)現(xiàn)了UserInput每次接收新的props的時(shí)候自動(dòng)更新state。但是這種實(shí)現(xiàn)方式是有問題的。

派生狀態(tài)導(dǎo)致的問題

首先來明確組件的兩個(gè)概念：受控?cái)?shù)據(jù)（controlled data lives）和不受控?cái)?shù)據(jù)（uncontrollered data lives）。受控?cái)?shù)據(jù)指的是組件中通過props傳入的數(shù)據(jù)，受到父組件的影響；不受控?cái)?shù)據(jù)指的是完全由組件自己管理的狀態(tài)，即內(nèi)部狀態(tài)（internal state）。而派生狀態(tài)揉合了兩種數(shù)據(jù)源，當(dāng)兩種數(shù)據(jù)源產(chǎn)生沖突時(shí)，問題隨之產(chǎn)生。

問題一

當(dāng)在修改一個(gè)用戶的時(shí)候，點(diǎn)擊‘確定'按鈕，輸入框里的文字又變成了修改之前的文字。比如我將‘bruce'修改為‘bruce lee'，確定后，輸入框中又變成了‘bruce'，這是我們不愿意看到的。

出現(xiàn)這個(gè)問題的原因是，點(diǎn)擊確定，App會(huì)re-render，App又將之前的user作為props傳遞給了UserInput。我們當(dāng)然可以在每次點(diǎn)擊確定之后將targetUser重置為一個(gè)空對象，但是一旦狀態(tài)多了之后，這樣管理起來非常吃力。

問題二

假設(shè)頁面加載完成后，會(huì)異步請求一些數(shù)據(jù)然后更新頁面，如果用戶在請求完成頁面刷新之前已經(jīng)在輸入框中輸入了一些文字，隨著頁面的刷新輸入框中的文字會(huì)被清除。

我們可以在App中加入如下代碼模擬一個(gè)異步請求：

 componentDidMount() {
  setTimeout(() => {
   this.setState({
    text: 'fake request'
   })
  }, 5000);
 }

導(dǎo)致這個(gè)問題的原因在于，當(dāng)異步請求完成，setState后App會(huì)re-render，而組件的componentWillReceiveProps會(huì)在父組件每次render的時(shí)候執(zhí)行，而此時(shí)傳入的user是一個(gè)空對象，所以UserInput的內(nèi)容被清空了。而getDerivedStateFromProps調(diào)用的更頻繁，會(huì)在組件每次render的時(shí)候調(diào)用，所以也會(huì)產(chǎn)生該問題。

為了解決這個(gè)問題我們可以在componentWillReceiveProps中判斷新傳入的user和當(dāng)前的user是否一樣，如果不一樣才設(shè)置state：

 componentWillReceiveProps(nextProps) {
  if (nextProps.user.id !== this.props.user.id) {
   this.setState({
    user: nextProps.user
   });
  }
 }

更好的解決方案

派生狀態(tài)的數(shù)據(jù)源的不確定性會(huì)導(dǎo)致各種問題，那如果每份數(shù)據(jù)有且只被一個(gè)component管理應(yīng)該就能避免這些問題了。這種思路有兩種實(shí)現(xiàn)，一種是數(shù)據(jù)完全由父組件管理，一種是數(shù)據(jù)完全由組件自己管理。下面分別討論：

完全受控組件（fully controlled component）

組件的數(shù)據(jù)完全來自于父組件，組件自己將不需要管理state。我們新建一個(gè)完全受控版的UserInput：

class FullyControlledUserInput extends React.Component {
 render() {
  const { user, onConfirm, onChange } = this.props;
  return (
   <div>
    <input value={user.name || ''} onChange={onChange} />
    <button onClick={() => { onConfirm(user) }}>確定</button>
   </div>
  )
 }
}

App中調(diào)用FullyControlledUserInput的方法如下：

...
  <FullyControlledUserInput
   user={targetUser}
   onChange={(e) => {
    this.setState({
     targetUser: {
      id: targetUser.id,
      name: e.target.value
     }
    });
   }}
   onConfirm={this.onConfirm}
  />
...

現(xiàn)在FullyControlledUserInput中的所有的數(shù)據(jù)都來源于父組件，由此解決數(shù)據(jù)沖突和被篡改的問題。

完全不受控組件（fully uncontrolled component）

組件的數(shù)據(jù)完全由自己管理，因此componentWillReceiveProps中的代碼都可以移除，但保留傳入props來設(shè)置state初始值：

class FullyUncontrolledUserInput extends React.Component {
 state = {
  user: this.props.user
 }

 onChange = (e) => {
  this.setState({
   user: {
    ...this.state.user,
    name: e.target.value
   }
  });
 }

 render() {
  const { user } = this.state;
  const { onConfirm } = this.props;
  return (
   <div>
    <input value={user.name || ''} onChange={this.onChange} />
    <button onClick={() => { onConfirm(user) }}>確定</button>
   </div>
  )
 }
}

當(dāng)傳入的props發(fā)生改變時(shí)，我們可以通過傳入一個(gè)不一樣的key來重新創(chuàng)建一個(gè)component的實(shí)例來實(shí)現(xiàn)頁面的更新。App中調(diào)用FullyUncontrolledUserInput的方法如下：：

<FullyUncontrolledUserInput
 user={targetUser}
 onConfirm={this.onConfirm}
 key={targetUser.id}
/>

大部分情況下，這是更好的解決方案。或許有人會(huì)覺得這樣性能會(huì)受影響，其實(shí)性能并不會(huì)變慢多少，而且如果組件的更新邏輯過于復(fù)雜的話，還不如重新創(chuàng)建一個(gè)新的組件來的快。

在父組件中調(diào)用子組件的方法設(shè)置state

如果某些情況下沒有合適的屬性作為key，那么可以傳入一個(gè)隨機(jī)數(shù)或者自增的數(shù)字作為key，或者我們可以在組件中定義一個(gè)設(shè)置state的方法并通過ref暴露給父組件使用，比如我們可以在UserInput中添加：

 setNewUserState = (newUser) => {
  this.setState({
   user: newUser
  });
 }

在App中通過ref調(diào)用這個(gè)方法：

  ...
  
  <UserInput user={targetUser} onConfirm={this.onConfirm} ref='userInput' />
   <ul>
   {
    users.map(u => (
     <li key={u.id}>
      {u.name}
      <button onClick={() => {
       this.setState({ targetUser: u });
       this.refs.userInput.setNewUserState(u);
      }}>
       編輯
      </button>
     </li>
    ))
   }
  </ul>
  <button onClick={() => {
   this.setState({ targetUser: {} });
   this.refs.userInput.setNewUserState({});
  }}>
   新建
  </button>
  
  ...

這個(gè)方法不推薦使用，除非實(shí)在沒法了。。

關(guān)于“React中如何傳入組件的props改變時(shí)更新組件的幾種實(shí)現(xiàn)方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

文章標(biāo)題：React中如何傳入組件的props改變時(shí)更新組件的幾種實(shí)現(xiàn)方法
轉(zhuǎn)載來源：http://www.chinadenli.net/article20/iiisjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站設(shè)計(jì)、App開發(fā)、響應(yīng)式網(wǎng)站、品牌網(wǎng)站建設(shè)、網(wǎng)頁設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)