可以通过在有意义的地方导出连接和未连接的组件来缓解此问题. export const Comment =({comment})=>(< p><用户ID = {comment.userId}/>{comment.text}</p>)导出默认的connect((state，props)=>({评论:state.comments [props.id]}))(评论)//稍后的...从"./comment"导入评论，{评论为未连接} Currently working on a react + redux project.I'm also using normalizr to handle the data structure and reselect to gather the right data for the app components.All seems to be working well.I find myself in a situation where a leaf-like component needs data from the store, and thus I need to connect() the component to implement it.As a simplified example, imagine the app is a book editing system with multiple users gathering feedback.Book Chapters Chapter Comments Comments CommentsAt different levels of the app, users may contribute to the content and/or provide comments.Consider I'm rendering a Chapter, it has content (and an author), and comments (each with their own content and author).Currently I would connect() and reselect the chapter content based on the ID.Because the database is normalised with normalizr, I'm really only getting the basic content fields of the chapter, and the user ID of the author.To render the comments, I would use a connected component that can reselect the comments linked to the chapter, then render each comment component individually.Again, because the database is normalised with normalizr, I really only get the basic content and the user ID of the comment author.Now, to render something as simple as an author badge, I need to use another connected component to fetch the user details from the user ID I have (both when rendering the chapter author and for each individual comment author).The component would be something simple like this:@connect( createSelector( (state) => state.entities.get('users'), (state,props) => props.id, (users,id) => ( { user:users.get(id)}) ))class User extends Component { render() { const { user } = this.props if (!user) return null return <div className='user'> <Avatar name={`${user.first_name} ${user.last_name}`} size={24} round={true} /> </div> }}User.propTypes = { id : PropTypes.string.isRequired}export default UserAnd it seemingly works fine.I've tried to do the opposite and de-normalise the data back at a higher level so that for example chapter data would embed the user data directly, rather than just the user ID, and pass it on directly to User – but that only seemed to just make really complicated selectors, and because my data is immutable, it just re-creates objects every time.So, my question is, is having leaf-like component (like User above) connect() to the store to render a sign of anti-pattern?Am I doing the right thing, or looking at this the wrong way? 解决方案 I think your intuition is correct. Nothing wrong with connecting components at any level (including leaf nodes), as long as the API makes sense -- that is, given some props you can reason about the output of the component.The notion of smart vs dumb components is a bit outdated. Rather, it is better to think about connected vs unconnected components. When considering whether you create a connected vs unconnected components, there are a few things to consider.Module boundariesIf you divided your app into smaller modules, it is usually better to constrain their interactions to a small API surface. For example, say that users and comments are in separate modules, then I would say it makes more sense for <Comment> component to use a connected <User id={comment.userId}/> component rather than having it grab the user data out itself.Single Responsibility PrincipleA connected component that has too much responsibility is a code smell. For example, the <Comment> component's responsibility can be to grab comment data, and render it, and handle user interaction (with the comment) in the form of action dispatches. If it needs to handle grabbing user data, and handling interactions with user module, then it is doing too much. It is better to delegate related responsibilities to another connected component.This is also known as the "fat-controller" problem.PerformanceBy having a big connected component at the top that passes data down, it actually negatively impacts performance. This is because each state change will update the top-level reference, then each component will get re-rendered, and React will need to perform reconciliation for all the components.Redux optimizes connected components by assuming they are pure (i.e. if prop references are the same, then skip re-render). If you connect the leaf nodes, then a change in state will only re-render affected leaf nodes -- skipping a lot of reconciliation. This can be seen in action here: https://github.com/mweststrate/redux-todomvc/blob/master/components/TodoItem.jsReuse and testabilityThe last thing I want to mention is reuse and testing. A connected component is not reusable if you need to 1) connect it to another part of the state atom, 2) pass in the data directly (e.g. I already have user data, so I just want a pure render). In the same token, connected components are harder to test because you need to setup their environment first before you can render them (e.g. create store, pass store to <Provider>, etc.).This problem can be mitigated by exporting both connected and unconnected components in places where they make sense.export const Comment = ({ comment }) => ( <p> <User id={comment.userId}/> { comment.text } </p>)export default connect((state, props) => ({ comment: state.comments[props.id]}))(Comment)// later on...import Comment, { Comment as Unconnected } from './comment' 这篇关于叶状组件中的connect()是React + redux中反模式的标志吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！
