React 入门第五步：组件布局小案例
我们结合前面学习的门第内容，做一个界面布局的步组小案例，案例最终呈现的布局效果如下：
基本布局
CSS 样式已经提前写好了，放在根路径下，案例起名为 style.css，门第具体代码如下：
html,步组 body { height: 100%; } body { margin: 0; padding: 0; } .header, .footer { width: 100%; height: 80px; position: absolute; left: 0; line-height: 80px; text-align: center; font-size: 18px; color: #fff; } .header { background-color: skyblue; top: 0; } .footer { background-color: purple; bottom: 0; } .main { width: 100%; position: absolute; top: 80px; bottom: 80px; padding: 20px 0; text-align: center; background: khaki; }我们创建好对应的子组件，分别为 src\Components\Header.js、布局src\Components\Home.js、案例src\Components\Footer.js。门第
在 \src\App.js 中引入上面的步组三个子组件及样式文件：
import React, { Component } from react import Header from ./Components/Header import Home from ./Components/Home import Footer from ./Components/Footer import ./style.css export class App extends Component { render() { return ( <> <Header></Header> <Home></Home> <Footer></Footer> </> ) } } export default App然后在子组件中，分别写好初始代码，布局因为已经有了对应的案例样式代码，因此在子组件中直接使用即可：
// src\Components\Header.js import React from react function Header() { return ( <> <div className={ header}> Header </div> </> ) } export default Header // ================================================= // src\Components\Home.js import React from react function Home() { return ( <> <div className={ main}> Home </div> </> ) } export default Home // ================================================= // src\Components\Footer.js import React from react function Footer() { return ( <> <div className={ footer}> Footer </div> </> ) } export default Footer基础代码实现之后，门第我们就能看到对应的步组效果了。但是布局，按照正常的编码逻辑，header 和 footer 应该属于公共部分，中间部分无论展示什么内容，头和尾都是需要展示的。
集成公共组件
我们需要将 Header 和 Footer 作为公共组件使用，需要添加一个src\Components\Layout.js 组件，Layout 组件的作用就是亿华云将 header与 footer 显示出来，同时把中间的 main 内容空出来，将来我们传入什么样的 JSX ，那么 main 里就显示什么样的 DOM。
在 Layout.js 中，引入 Header 与 Footer 组件并应用在 JSX 中，然后利用 JSX 传参，展示主体内容。前面我们已经学习过，这里使用的是函数组件，只需要在函数中使用形参获取 Props ，然后在展示主体内容的地方获取 { props.children} 就可以了：
import React from react import Header from ./Header import Footer from ./Footer function Layout(props) { return ( <> <Header /> <div className="main"> { props.children} </div> <Footer /> </> ) } export default Layout公共组件完成后，我们想展示那个主体组件的内容，就在那个组件中引入 Layout ，然后将主体内容以传递 jsx 的方式传入就可以了，最后再在 App 中，引入主体组件进行展示，具体代码如下：
// Home.js import React from react import Layout from ./Layout function Home() { return ( <Layout> <div>Home</div> </Layout> ) } export default Home // ==================================== // List.js import React from react import Layout from ./Layout function List() { return ( <Layout> <div className="main"> list </div> </Layout> ) } export default List // ==================================== // App.js import React, { Component } from react import Home from ./Components/Home import List from ./Components/List import ./style.css export class App extends Component { render() { return ( <> <Home /> <List /> </> ) } } export default App总的来说，就是利用了向组件传递 JSX 的特性实现的。
最后，做个小总结，服务器租用从接触组件这个概念，到组件间的传递，我们学习了很多内容，也深刻的体会了 JSX 就是 JS 这个概念。
而在组件间数据传递部分，Props 是核心关键点。
但是，你可能还不知道，Props 有一个非常重要的特性：只读，意思就是我们在组件中获取到的 Props 数据，你只能用，而不能改。
官方手册的原话是：
组件无论是使用函数声明还是通过class 声明，都绝不能修改自身的 Props…… React 非常灵活，但它也有一个严格的规则：所有 React 组件都必须像纯函数一样保护它们的 props 不被更改。这里提到了一个 函数式编程 中的 纯函数 概念，我简单解释一下什么是站群服务器纯函数：“函数不会在函数体中修改入参，且在多次调用下，相同的入参始终返回相同的结果。”
其实，从这里可以看出，React 团队希望组件本身是具有纯函数特性的，因此，Props 就需要设置为只读的，不能在组件中被修改。
但是问题是，我们界面展示的内容是需要根据数据改变而改变的，而 React 设计的核心理念中有非常重要的一点就是 数据驱动 UI。
看到这里，你一定会觉得 React 在自相矛盾，一边传入的 Props 数据是只读不可改变的，一边又依靠数据的改变而驱动 DOM 的改变。
真的是这样吗?
当然不是，数据驱动 UI 中的数据另有其人，它称之为 “state”，也叫状态，作用就是在不违反上述规则的情况下，state 允许 React 组件随用户操作、网络响应或者其他变化而动态更改输出的内容。