UI元件 和 容器元件

像原來的**：

import react,  from 'react';

import 'antd/dist/antd.css';
import  from 'antd';
import store from './store/index.js';
import  from './store/actioncreators';
class beautifultodolist extends component 
render() )}
/>
)}  handleinputchange(e) 
handlestorechange() 
handlebtnclick() 
handleitemclick(index) 
}export default beautifultodolist;

可以把它拆分，把結構樣式放乙個檔案，業務邏輯放乙個檔案。前者叫ui元件，後者叫容器元件。

好。我們新建乙個todolistui.js 檔案，將上面前端展示部分放進來，如下。

import react,  from 'react';

class todolistui extends component )}
/>)}}
export default todolistui;

import react,  from 'react';

import store from './store/index.js';
import  from './store/actioncreators';
import todolistui from './todolistui';
class beautifultodolist extends component 
render() 
handleinputchange(e) 
handlestorechange() 
handlebtnclick() 
handleitemclick(index) 
}export default beautifultodolist;

import react,  from 'react';

import 'antd/dist/antd.css';
import  from 'antd';
class todolistui extends component }>)}
/>)}}
export default todolistui;

UI元件和容器元件的拆分

1.首先，以前面的todolist為例 以下是原來的todolist中的render函式中的內容，我們可以將元件中關於ui渲染頁面的封裝到乙個檔案中 render 2.在src目錄下新建乙個檔名為todolistui.js。將剛剛的render中的內容複製到todolistui裡面。3 這裡需要進一...

React 拆解元件成UI元件和容器元件

前言 在複雜的元件中，我們最好把元件拆分為ui元件和容器元件以方便我們的管理和維護 import react,from react class test extends component render onmousemove onclick li ul showitem e showindex i...

容器元件和展示元件react redux

react redux的作用是連線 connect store和容器元件的。store是redux提供的，容器元件是react提供的。容器元件 位於應用最頂層的元件，用來與redux連線的。從redux中獲取資料作為props。展示元件 位於應用的中間或者子元件，是純粹的元件，與redux沒有關係。...