Question

使用React性能工具并规范化存储redux时，连接组件的包装器得到打印（在printWasted中）

截图：当处理onClick以编辑/auth/github组件

中的文本时会发生这种情况

我的redux商店：

Comment

减速器：

{
  currentPosts: ["123", "321"],
  entities: {
    articles: {
      "123": {
        id: "123",
        author: ["1"],
        title: "My awesome blog posts",
        comments: ["234"]
      },
      "321": {
        id: "321",
        author: ["2"],
        title: "My second awesome blog posts",
        comments: ["456"]
      }
    },
    users: {
      "1": {
        id: "1",
        name: "Paul"
      },
      "2": {
        id: "2",
        name: "Nicole"
      },
      "3": {
        id: "3",
        name: "Roy"
      },
      "4": {
        id: "4",
        name: "Peth"
      }
    },
    comments: {
      "234": {
        id: "234",
        commenter: ["3"],
        text: "This is comment 234"
      },
      "456": {
        id: "456",
        commenter: ["4"],
        text: "This is comment 456"
      }
    }
  }
}

动作：

const rootReducer = combineReducers({
  entities,
  currentPosts
})

const entities = combineReducers({
  articles,
  users,
  comments
})

const articles = (state = {}, action) => {
  return state
}

const users = (state = {}, action) => {
  return state
}

const comments = (state = {}, action) => {
  switch (action.type) {
    case 'EDIT_COMMENT':
      return Object.assign({}, state, {
        [action.id]: Object.assign({}, state[action.id], {
          text: action.comment
        })
      })
    default:
      return state
  }
}

组件（由4分开）：

容器：

export const editComment = (id) => {
  return {
    id,
    type: 'EDIT_COMMENT',
    comment: `Edited comment ${id}`,
  }
}

文章：

import React from 'react'
import { connect } from 'react-redux'
import Article from './Article'

const Container = ({ currentPosts }) => (
  <div>
    {currentPosts.map((val, i) =>
      <Article
        key={i}
        titleKey={val} />
    )}
  </div>
)

const mapStateToProps = (state) => ({
  currentPosts: state.currentPosts
})

export default connect(mapStateToProps)(Container)

注释：

import React from 'react'
import { connect } from 'react-redux'
import Creator from './Creator'
import Comment from './Comment'

const Article = ({ articles, titleKey }) => {
  const article = articles[titleKey]
  return (
    <div style={{marginBottom: '10px'}}>
      title: {article.title}
      {article.author.map((val, i) =>
        <Creator
          label="author"
          key={i}
          authorKey={val} />
      )}
      {article.comments.map((val, i) => {
        return (
          <Comment
            key={i}
            commentKey={val} />
        )
      }
      )}
    </div>
  )
}

const mapStateToProps = (state) => ({
  articles: state.entities.articles
})

export default connect(mapStateToProps)(Article)

创建者

import React from 'react'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import Creator from './Creator'
import { editComment } from './actions'
import Perf from 'react-addons-perf'
window.Perf = Perf

class Comment extends React.Component {
  constructor(props) {
    super(props)
    this.handleEditComment = this.handleEditComment.bind(this)
  }

  handleEditComment() {
    const comment = this.props.comments[this.props.commentKey]
    Perf.start()
    this.props.actions.editComment(comment.id)
  }

  shouldComponentUpdate(nextProps) {
    if (this.props.comments[this.props.commentKey].text !== nextProps.comments[nextProps.commentKey].text) {
      return true
    }
    return false
  }

  componentDidUpdate() {
    Perf.stop()
    Perf.printWasted()
  }

  render() {
    const comment = this.props.comments[this.props.commentKey]

    return (
      <div>
        comment {comment.text}
        {comment.commenter.map((val, i) =>
          <Creator
            label="commenter"
            key={i}
            authorKey={val} />
        )}
        <button onClick={this.handleEditComment}>Edit Comment</button>
      </div>
    )
  }
}

const mapStateToProps = (state) => ({
  comments: state.entities.comments
})

const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators({ editComment }, dispatch)
})

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Comment)

这是否可以删除连接组件的包装器的printWasted，或者我对redux和redux存储区规范化的误解？

Answer 1

我在github问题中询问并在此处解决https://github.com/reactjs/react-redux/issues/700

printWasted - 使用redux和规范化redux存储时连接组件的包装器

1 个答案: