第二章 — 面向组件编程
2.1 模块与组件
模块
因为随着业务需求的增加，交互的频繁。业务逻辑越来越复杂，代码越来越多。
因此需要将逻辑代码拆成模块。
从而使代码可以复用，功能可以区分，开发效率也可以增加。
模块化
即将一个项目的 JS 以模块拆分，即模块化
组件
相比模块只能才拆分 JS ， 组件是拆分 HTML， CSS ，JS。
将一个页面的版块的功能整体的抽离出来。
代码复用率提升，简化项目。提高运行效率。
组件化
将一个项目按功能等版块拆分，不仅仅拆 JS 。即是组件化
2.2 创建组件和使用
创建组件有两种方法 ，函数创建组件 和 类创建组件
函数创建组件
- 创建组件函数 ，返回一个 JSX写的需要渲染的 DOM（开头必须大写）
function Component1(){
// 必须有返回值
return <h1>我是函数定义的组件</h1>
}
- 使用标签格式渲染到页面 ，函数名就是组件名。必须有结束的符号
ReactDOM.render(<Component1/>,document.querySelector('#con'))
注意点 ：
- 首字母必须大写
- 结束符号 ’/ ‘ 一定需要
- 结果 Babel 转换后会启用严格模式 ，函数内的 this 不指向 window ,而是 undefined.
渲染过程 ：
- React 解析组件标签 。找到组件
- 发现是函数组件，便调用组件。
- 函数组件返回虚拟 DOM ， 如何渲染到页面
类创建组件
- 创建一个组件类，这个类必须继承 React.comoinent类。首字母大写。类目就是组件名；
class Component2 extends React.Component{
// 这里可以不需要写构造器。
// 必须写 render 函数 ，并且必须返回 JSX 写的虚拟DOM
render (){ // render 是不止调用一次的 。每次重新渲染都会重新调用
return <h1>我是类定义的组件</h1>
}
- 同函数组件渲染方法一样
ReactDOM.render(<Component2/>,document.querySelector('#con'))
注意点 ：
- 必须继承 React.component类，这个类由React提供。
- 必须写 render 方法，且必须有返回虚拟DOM ，否则没有效果。
渲染过程 ：
-
React 解析组件标签 -
发现是类组件 ，便实例这个类。 -
通过调用实例的 render 方法。获取虚拟DOM -
渲染虚拟DOM到页面
组件有简单组件和复杂组件。 简单组件是没有 状态的 。而复杂组件是有状态的。
而函数创建组件是只能创建简单组件 。类创建组件可以创建复杂组件。
|