组件化拆分——react中进行封装组件 & 入口组件 & Header 标题组件 & List内容列表组件 & Footer底部筛选菜单组件
- 把整个复杂的页面拆解为粒度更细的小组件
- TodoApp 案例入口组件
- Header 标题组件
- List 列表组件
- Footer 筛选菜单组件
<section className='todoapp'>
<Header/>
<List/>
<Footer/>
</section>
实例
1、src/App.js
import React from 'react';
import './App.css';
import TodoApp from './views/TodoApp.js'
function App() {
return (
<div>
<TodoApp/>
</div>
);
}
export default App;
2、src/views/TodoApp.js
3、src/views/header
4\src/views/Footer.js
5、src/views/List.js
6、组件拆分效果