Redux中的Component和Container有什么区别

Redux 是一个用于JavaScript应用程序的状态管理库，它有助于将应用程序的状态存储和管理在一个单一的store中，使得在应用程序不断增长时更容易维护和更新状态。

Component: Redux中的Component是指一个根据传递给它的state和props来渲染UI的展示性组件。它被认为是一个”笨”组件，因为它不处理任何逻辑或状态更新。

语法：

import React from 'react';

const Component = ({ state, props }) => {
    return (
        <div>
            <p>{state.value}</p>
        </div>
    );
};

export default Component;

优点：

容易编写和理解。
可重复使用。
可以独立测试。

缺点：

无法访问Redux存储。
逻辑能力或状态更新能力有限。

示例： 这个组件接受一个用户数组作为props，并渲染一个用户列表。

App.js

import "./App.css"; 
import React, { useState } from 'react'; 
import UserList from './UserList'; 
  
const App = () => { 
    const [users, setUsers] = useState([ 
        { id: 1, name: 'Dhruv Rawat' }, 
        { id: 2, name: 'Vinoba Bhave' }, 
        { id: 3, name: 'Medha Patkar.' }, 
    ]); 
  
    return ( 
        <div> 
            <h1>User List</h1> 
            <UserList users={users} /> 
        </div> 
    ); 
}; 
  
export default App;

UserList.js

import React from 'react'; 
  
const UserList = ({ users }) => ( 
    <ul> 
        {users.map(user => ( 
            <li key={user.id}>{user.name}</li> 
        ))} 
    </ul> 
); 
  
export default UserList;

输出：

Redux中的Component和Container有什么区别

容器：

在Redux中，容器指的是连接到Redux存储的组件，负责调度操作并更新状态。它被认为是一个“智能”组件，因为它处理逻辑和状态更新。

语法：

import { connect } from 'react-redux';
import Component from './Component';

function mapStateToProps(state) {
    return {
        data: state.data
    };
}

export default connect(mapStateToProps)(Component);

优点：

可以访问Redux存储和dispatch函数
能够对状态进行逻辑和更新

缺点：

编写和理解更复杂
不可重用

示例： 此容器使用react-redux库中的connect函数连接到Redux存储库。mapStateToProps函数用于指定哪些部分的状态应作为props传递给组件。在此示例中，传递了整个用户状态。

App.js

import React from 'react'; 
import { Provider } from 'react-redux'; 
import store from './store'; 
import ConnectedUserList from './ConnectedUserList'; 
  
const App = () => ( 
    <Provider store={store}> 
        <ConnectedUserList /> 
    </Provider> 
); 
  
export default App;

UserList.js

import React from 'react'; 
  
const UserList = ({ users }) => ( 
    <ul> 
        {users.map(user => ( 
            <li key={user.id}>{user.name}</li> 
        ))} 
    </ul> 
); 
  
export default UserList;

ConnectedUserList.js

import { connect } from 'react-redux'; 
import UserList from './UserList'; 
  
const mapStateToProps = state => ({ 
    users: state.users, 
}); 
  
export default connect(mapStateToProps)(UserList);

storage.js

import { createStore } from 'redux'; 
  
const initialState = { 
    users: [ 
        { id: 1, name: 'Ridhiya Negi' }, 
        { id: 2, name: 'Geet Negi' }, 
    ], 
}; 
  
const rootReducer = (state = initialState, action) => state; 
  
export default createStore(rootReducer);

输出：

Redux中的Component和Container有什么区别

比较表格：

Component	Container
根据状态和属性渲染用户界面。	分发动作并更新状态。
“笨拙”的组件。	“聪明”的组件。
易于编写和理解。	编写和理解较为复杂。
可重用	不可重用
无法访问Redux存储。	可以访问Redux存储和分发函数。
可以独立测试。	无法独立测试。
重点放在展示上。	重点放在数据管理上。