深入浅出React和Redux——阅读笔记5

第五章 React组件的性能优化

1. 利用React-Redux的shouldComponentUpdate优化性能

   
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png

代码如下：
todoList.js

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import TodoItem from './todoItem.js';
import {FilterTypes} from '../../constants.js';

const TodoList = ({todos, onClickTodo}) => {
  return (
    

    {
      todos.map((item) => (
        
        ))
    }
    
  );
};

TodoList.propTypes = {
  todos: PropTypes.array.isRequired
};

const selectVisibleTodos = (todos, filter) => {
  switch (filter) {
    case FilterTypes.ALL:
      return todos;
    case FilterTypes.COMPLETED:
      return todos.filter(item => item.completed);
    case FilterTypes.UNCOMPLETED:
      return todos.filter(item => !item.completed);
    default:
      throw new Error('unsupported filter');
  }
}

const mapStateToProps = (state) => {
  return {
    todos: selectVisibleTodos(state.todos, state.filter)
  };
}

export default connect(mapStateToProps)(TodoList);

与之前的文件对比可以发现，在调用todoItem是多传递了一个id参数，移除了所有函数的传递，该有子组件自己去调用函数
todoItem.js

import React, {PropTypes} from 'react';
//import {bindActionCreators} from 'redux';
import {connect} from 'react-redux';
import {toggleTodo, removeTodo} from '../actions.js';

class TodoItem extends React.Component {
  constructor() {
    super(...arguments);

    console.log('enter TodoItem constructor: ' + this.props.text);
  }

  render() {
    const {onToggle, onRemove, completed, text } = this.props;

    console.log('enter TodoItem render: ' + text);

    return (
      

        
        {text}
        ×
      
    );
  };
}

TodoItem.propTypes = {
  onToggle: PropTypes.func.isRequired,
  onRemove: PropTypes.func.isRequired,
  completed: PropTypes.bool.isRequired,
  text: PropTypes.string.isRequired
}

const mapDispatchToProps = (dispatch, ownProps) => {
  const {id} = ownProps;
  return {
    onToggle: () => dispatch(toggleTodo(id)),
    onRemove: () => dispatch(removeTodo(id))
  }
};

export default connect(null, mapDispatchToProps)(TodoItem);

子组件中引入了connect函数（为了使用redux的shouldComponentUpdate函数），并通过mapDispatchToProps定义自身使用的函数，避免了每一次调用传递新函数，导致每次动作的更新，至于从函数变为react类，是因为jsx中无法写语句，但是想要使用console.log语句看输出。

2. React的调和（Reconciliation）过程

   
   
   

   image.png

3. 节点类型不同的情况

image.png

image.png

2. 节点类型相同的情况

   
   
   

   image.png
   
   
   

   image.png

3. 多个子组件的情况

   
   
   

   image.png
   
   
   

   image.png

4. key的用法

   
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png

5. 用reselect提高数据获取性能
   

   

   image.png
   
   使用：
   安装：npm install --save reselect
   应用：
   selector.js

import {createSelector} from 'reselect';
import {FilterTypes} from '../constants.js';

const getFilter = (state) => state.filter;
const getTodos = (state) => state.todos;

export const selectVisibleTodos = createSelector(
 [getFilter, getTodos],
 (filter, todos) => {
   switch (filter) {
     case FilterTypes.ALL:
       return todos;
     case FilterTypes.COMPLETED:
       return todos.filter(item => item.completed);
     case FilterTypes.UNCOMPLETED:
       return todos.filter(item => !item.completed);
     default:
       throw new Error('unsupported filter');
   }
 }
);

todoList.js

import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import TodoItem from './todoItem.js';
import {selectVisibleTodos} from '../selector.js';

const TodoList = ({todos, onClickTodo}) => {
  return (
    

    {
      todos.map((item) => (
        
        ))
    }
    
  );
};

TodoList.propTypes = {
  todos: PropTypes.array.isRequired
};

const mapStateToProps = (state) => {
  return {
    todos: selectVisibleTodos(state)
  };
}

export default connect(mapStateToProps)(TodoList);

6. 范式化状态树

   
   
   

   image.png
   
   
   

   image.png
   
   
   

   image.png