在 React 中管理嵌套状态的好方法

Question

编辑：我重写了这个问题以澄清我所追求的 - 感谢到目前为止帮助我磨练它的人。

我试图了解如何最好地在 React 中管理复杂的嵌套状态，同时限制为内容未更改的组件调用 render() 的次数。

作为背景：

假设我在这样的对象中有“作者”和“出版物”的状态：

{
  'authors' : {
    234 : {
      'name' : 'Alice Ames',
      'bio' : 'Alice is the author of over ...',
      'profile_pic' : 'http://....'
    },
    794 : {
      'name' : 'Bob Blake',
      'bio' : 'Hailing from parts unknown, Bob...',
      'profile_pic' : 'http://....'
    },
    ...more authors...
 },
 'publications' : {
    539 : {
      'title' : 'Short Story Vol. 2',
      'author_ids' : [ 234, 999, 220 ]
    },
    93  : {
      'title' : 'Mastering Fly Fishing',
      'author_ids' : [ 234 ]
    },
    ...more publications...
  }
}

在这个人为的示例中，状态有两个主要区域，可通过 authors 和 publications 键访问。

authors 键指向一个以作者 ID 为键的对象，这指向一个包含一些作者数据的对象。

publications 键指向一个以出版物 ID 为键的对象，该对象具有一些出版物数据和一组作者。

假设我的状态在一个带有子组件的App 组件中，如下面的伪 JSX：

...
<App>
  <AuthorList authors={this.state.authors} />
  <PublicationList authors={this.state.authors} publications={this.state.publications} />
</App>
...

...
class AuthorList extends React.Component {
  render() {
    let authors = this.props.authors;
    return (
      <div>
        { Object.keys( authors ).map( ( author_id ) => {
          return  <Author author={authors[author_id]} />;
        }
      </div>
    );
  }
}
...

...
class PublicationList extends React.Component {
  render() {
    let publications = this.props.publications;
    let authors = this.props.authors;
    return (
      <div>
        { Object.keys( publications ).map( ( publication_id ) => {
          return  <Publication publication={publications[publication_id]} authors=authors />;
        }
      </div>
    );
  }
}
...

假设AuthorList 有一堆Author 子组件，而PublicationList 有一堆Publication 子组件来渲染这些东西的实际内容。

这是我的问题：假设我想更新给定作者的bio，但我不希望为所有内容未更改的Author 和Publication 对象调用render() .

从这个答案：

ReactJS - Does render get called any time "setState" is called?

React 组件的 render() 函数将在其状态或其任何父级的状态发生变化时被调用 - 无论该状态变化是否与该组件的道具有关。可以使用 shouldComponentUpdate 更改此行为。

人们如何处理像上面这样的复杂状态 - 在每次状态更改时对大量组件调用 render() 似乎不是一个好的解决方案（即使生成的渲染对象相同，因此不会发生更改到实际的 DOM）。

Answer 1

这是一种使用 Object Spread Syntax 高效且易读的方法。

let state = {
    authors : {
        ...this.state.authors, 
        [ givenId ] : { 
            ...this.state.authors[ givenID ], 
            bio : newValue 
        }
    }  
}
this.setState(state)

请记住，当您在 jsx 中映射项目时，您必须传递一个“密钥”作为道具。

这主要是因为，react 的协调（React 的“差异”算法来检查已更改的内容）会检查映射 jsx 的键（大致命名为 jsx）。

无论如何，在 reacts state/setState 或 redux 中管理状态与“和解”无关。

在这两种情况下，您都可以使用“对象传播语法”语法更改嵌套数据的一部分。

剩下的就是将“相同”的键传递给映射的 jsx。因此，尽管 react 会重新渲染，但它不会尝试对不必要的部分进行 dom 更新，这很昂贵。

Answer 2

您应该使用immutability helper，每个React's documentation。这提供了一种更新部分状态的机制，并为您处理任何所需的克隆，尽可能减少重复。

这允许您执行以下操作：

this.setState(update(this.state, { authors: { $set: { ... } } }));

它只会重新渲染受更改影响的组件。

Answer 3

我认为使用Redux 将使您的应用更高效且更易于管理。

具有称为 Redux 存储 的全局状态，它允许您的任何组件订阅存储的切片并在这些数据发生更改时重新呈现。

在您的示例中，redux 实现它的方式是您的AuthorList 组件将订阅state.authors 对象，如果AuthorList 组件内部或外部的任何组件更新state.authors，则只有@987654326 @ 组件将重新渲染（以及订阅它的那些）。

Answer 4

您的组件状态应该只真正包含内部状态值。

您应该考虑使用Redux 在多个组件中存储更复杂的状态。

Answer 5

感谢 jpdeatorre 和 daveols 指点我 Redux。

这是一个使用 Redux 将组件与与其无关的状态更改隔离开来的示例应用程序（有大量的切角，但它展示了技术）。

在此示例中，对 ID 为 1 的作者 Alice 所做的更改不会导致不依赖于 Alice 的 Author 组件调用其 render()。

这是因为 Redux 为其连接的 react 组件提供了 shouldComponentUpdate 来评估 props 是否以及相关状态是否已更改。

请注意，这里 Redux 的优化很浅。要确定是否要跳过 render() Redux 的 shouldComponentUpdate 检查是否：

• 新旧道具相互===
• 或者，如果不是，它们具有相同的键并且这些键的值是=== 到彼此。

因此它可能会导致 render() 被调用其值在逻辑上仍然相等的组件，但是这些组件的道具及其第一级键与 === 不相等。见：https://github.com/reactjs/react-redux/blob/master/src/utils/shallowEqual.js

还要注意，为了防止在 Author 的“哑”组件上调用 render()，我必须将它 connect() 到 Redux 以启用 Redux 的 shouldComponentUpdate 逻辑 - 即使该组件根本什么都不做与 state 并只是读取它的 props。

import ReactDOM from 'react-dom';
import React from 'react';

import { Provider, connect } from 'react-redux';
import { createStore, combineReducers } from 'redux';

import update from 'immutability-helper';


const updateAuthor = ( author ) => {
  return ( {
    type : 'UPDATE_AUTHOR',
    // Presently we always update alice and not a particular author, so this is ignored.
    author
  } );
};

const updateUnused = () => {
  return ( {
    type : 'UPDATE_UNUSUED',
    date : Date()
  } );
};

const initialState = {
  'authors': {
    1: {
      'name': 'Alice Author',
      'bio': 'Alice initial bio.'
    },
    2: {
      'name': 'Bob Baker',
      'bio': 'Bob initial bio.'
    }
  },
  'publications': {
    1 : {
      'title' : 'Two Authors',
      'authors' : [ 1, 2 ]
    },
    2 : {
      'title' : 'One Author',
      'authors' : [ 1 ]
    }
  }
};

const initialDate = Date();

const reduceUnused = ( state=initialDate, action ) => {
  switch ( action.type ) {
    case 'UPDATE_UNUSED':
      return action.date;

    default:
      return state;
  }
};

const reduceAuthors = ( state=initialState, action ) => {
  switch ( action.type ) {
    case 'UPDATE_AUTHOR':
      let new_bio = state.authors['1'].bio + ' updated ';
      let new_state = update( state, { 'authors' : { '1' : { 'bio' : {$set : new_bio } } } } );
      /*
      let new_state = {
        ...state,
        authors : {
          ...state.authors,
          [ 1 ] : {
            ...state.authors[1],
            bio : new_bio
          }
        }
      };
      */
      return new_state;

    default:
      return state;
  }
};

const testReducers = combineReducers( {
  reduceAuthors,
  reduceUnused
} );

const mapStateToPropsAL = ( state ) => {
  return ( {
    authors : state.reduceAuthors.authors
  } );
};

class AuthorList extends React.Component {

  render() {
    return (
      <div>
        { Object.keys( this.props.authors ).map( ( author_id ) => {
          return <Author key={author_id} author_id={author_id} />;
        } ) }
      </div>
    );
  }
}
AuthorList = connect( mapStateToPropsAL )(AuthorList);

const mapStateToPropsA = ( state, ownProps ) => {
  return ( {
    author : state.reduceAuthors.authors[ownProps.author_id]
  } );
};

class Author extends React.Component {

  render() {
    if ( this.props.author.name === 'Bob Baker' ) {
      alert( "Rendering Bob!" );
    }

    return (
      <div>
        <p>Name: {this.props.author.name}</p>
        <p>Bio: {this.props.author.bio}</p>
      </div>
    );
  }
}
Author = connect( mapStateToPropsA )( Author );


const mapStateToPropsPL = ( state ) => {
  return ( {
    authors : state.reduceAuthors.authors,
    publications : state.reduceAuthors.publications
  } );
};


class PublicationList extends React.Component {

  render() {
    console.log( 'Rendering PublicationList' );
    let authors = this.props.authors;
    let publications = this.props.publications;
    return (
      <div>
        { Object.keys( publications ).map( ( publication_id ) => {
          return <Publication key={publication_id} publication={publications[publication_id]} authors={authors} />;
        } ) }
      </div>
    );
  }
}
PublicationList = connect( mapStateToPropsPL )( PublicationList );


class Publication extends React.Component {

  render() {
    console.log( 'Rendering Publication' );
    let authors = this.props.authors;
    let publication_authors = this.props.publication.authors.reduce( function( obj, x ) {
      obj[x] = authors[x];
      return obj;
    }, {} );

    return (
      <div>
        <p>Title: {this.props.publication.title}</p>
        <div>Authors:
          <AuthorList authors={publication_authors} />
        </div>
      </div>
    );
  }
}

const mapDispatchToProps = ( dispatch ) => {
  return ( {
    changeAlice : ( author ) => {
      dispatch( updateAuthor( author ) );
    },
    changeUnused : () => {
      dispatch( updateUnused() );
    }
  } );
};

class TestApp extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div>
        <p>
          <span onClick={ () => { this.props.changeAlice( this.props.authors['1'] ); } }><b>Click to Change Alice!</b></span>
        </p>
        <p>
          <span onClick={ () => { this.props.changeUnused(); } }><b>Click to Irrelevant State!</b></span>
        </p>

        <div>Authors:
          <AuthorList authors={this.props.authors} />
        </div>
        <div>Publications:
          <PublicationList authors={this.props.authors} publications={this.props.publications} />
        </div>
      </div>
    );
  }
}
TestApp = connect( mapStateToPropsAL, mapDispatchToProps )( TestApp );

let store = createStore( testReducers );

ReactDOM.render(
  <Provider store={store}>
    <TestApp />
  </Provider>,
  document.getElementById( 'test' )
);