我无法理解为什么带有'connect()'的组件在响应中是有状态的

Question

我的问题和标题一样.

假设我写了以下代码.

class TODOList extends Component {  
  render() {
    const {todos, onClick} = this.props;
    return (
      <ul>
            {todos.map(todo =>
                <Todo 
                    key={todo.id}
                    onClick={onClick}
                    {...todo}
                />
             )}
      </ul>
    );
  }
}


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


const mapDispatchToProps = (dispatch) => {  
    return {
        onClick(data){
          dispatch(complete(data)) 
        }
    }
}


export default connect(mapStateToProps,mapDispatchToProps)(TODOList); 

现在,在最后一行之后,此代码将导出TODOList组件,其状态为props.它不是包含状态,而是只是接收状态并将它们作为"道具",就像方法名称"mapStateToProps"解释的那样.

在Dan Abramov编写的媒体文章(https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0)中,容器组件将数据作为状态处理,而表示属性作为道具处理.它不是一个将数据作为道具处理的表示组件吗？我坚持认为合适的容器应该像下面那样.

class CommentList extends React.Component {
  this.state = { comments: [] };

  componentDidMount() {
    fetchSomeComments(comments =>
      this.setState({ comments: comments }));
  }
  render() {
    return (
      <ul>
        {this.state.comments.map(c => (
          <li>{c.body}—{c.author}</li>
        ))}
      </ul>
    );
  }
}

我不确定为什么react-redux将API命名为"mapStateToProps",当我试图制作'有状态'(不按属性处理数据)容器组件时

Answer 1

首先,这些指南不是圣经的一部分,
您应该为您和您的TEAM编写易于推理的代码.

我认为你遗漏了一些东西,一个redux容器与一个反应容器不同.
我的意思是,connect将为您创建容器,这并不意味着包装组件是一个Container.

基本上,您可以从同一文件导出两个版本,即Container(连接版本)和演示文稿版本(无连接版本).

通常会引起人们注意的另一件事是函数的名称和参数mapStateToProps.
我喜欢的名字mapStoreToProps,如

将redux商店映射到组件的道具.

state当我们处于上下文中时,名称可能会令人困惑react.

编辑
作为评论的后续内容:

我完全不知道这两个实际上是不同的.你能告诉我更多细节吗？

它们与connect为您创建"容器" 的方式不同.

connect是一个高阶组件,为我们创建容器组件,所有订阅逻辑+函数将商店和动作创建者的部分作为道具(mapStateToProps&mapDispatchToProps)传递给子项.

"普通"容器通常是指您手工编写的组件,它通常不处理事物的外观,而是处理应用程序的某些逻辑.

至于其他评论

react-redux的connect HoC只是将您可以请求的属性注入组件中.它返回一个包含在组件周围的新组件,以便每当您对redux存储感兴趣的状态被修改时它就可以更新组件

正如我上面提到的,这是部分正确的.它不只是将属性注入我们的组件,它订阅商店,从Provider(通过context)抓取它,并在考虑优化的情况下完成所有这些,因此我们不必自己完成.

我不确定mapStateToProps如何混淆某人.我们正在谈论一个州管理图书馆

我已经看到一些开发者误解了这个,因为react有一个state并且redux有一个store(至少在大多数教程和文档中调用它的方式).
对于一些react或两者都不熟悉的人来说,这可能会令人困惑redux.

编辑2

由于句子"它并不意味着包裹的组件是一个容器",这有点令人困惑.为什么包裹的组件不是容器？连接创建的组件也不是容器吗？

我的意思是你写的包装组件不一定是 Container.
您可以连接"演示"组件:

const Link = ({ active, children, onClick }) => {
  if (active) {
    return <span>{children}</span>
  }

  return (
    <a
      href=""
      onClick={e => {
        e.preventDefault()
        onClick()
      }}
    >
      {children}
    </a>
  )
}

// ...
export default connect(mapState, mapDispatch)(Link)