React_组合Components

Components

5.3.1 创建项目

创建项目box-app：

1
2
3
create-react-app box-app
cd box-app
npm start

安装bootstrap库：

1
npm i bootstrap

bootstrap的引入方式：

1
import "bootstrap/dist/css/bootstrap.css";

5.3.2 创建 Component

5.3.3 创建按钮

当子节点数量大于 1 时，可以用<div>或<React.Fragment>将其括起来。

5.3.4 内嵌表达式

JSX 中使用{}嵌入表达式。

5.3.5 设置属性

  • class -> className
  • CSS 属性：background-color -> backgroundColor，其它属性类似

5.3.6 数据驱动改变 Style

5.3.7 渲染列表

  • 使用 map 函数
  • 每个元素需要具有唯一的key属性，用来帮助 React 快速找到被修改的 DOM 元素。

5.3.8 Conditional Rendering

利用逻辑表达式的短路原则。

  • 与表达式中 expr1 && expr2，当expr1为假时返回expr1的值，否则返回expr2的值
  • 或表达式中 expr1 || expr2，当expr1为真时返回expr1的值，否则返回expr2的值

5.3.9 绑定事件

  • 注意妥善处理好绑定事件函数的this

5.3.10 修改 state

  • 需要使用this.setState()函数
  • 每次调用this.setState()函数后，会重新调用this.render()函数，用来修改虚拟 DOM 树。React 只会修改不同步的实际 DOM 树节点。

1.3.11 给事件函数添加参数

组合 components

5.4.1 创建Boxes组件

Boxes组件中包含一系列Box组件。

5.4.2 从上往下传递数据

通过this.props属性可以从上到下传递数据。

5.4.3 传递子节点

通过this.props.children属性传递子节点

5.4.4 从下往上调用函数

注意：每个组件的this.state只能在组件内部修改，不能在其他组件内修改。

5.4.5 每个维护的数据仅能保存在一个this.state中

  • 不要直接修改this.state的值，因为setState函数可能会将修改覆盖掉。

5.4.6 创建 App 组件

包含：

  • 导航栏组件
  • Boxes组件

注意：

  • 要将多个组件共用的数据存放到最近公共祖先的this.state中。

5.4.7 无状态函数组件

  • 当组件中没有用到this.state时，可以简写为无状态的函数组件。
  • 函数的传入参数为props对象

5.4.8 组件的生命周期

  • Mount周期，执行顺序：constructor() -> render() -> componentDidMount()
  • Update周期，执行顺序：render() -> componentDidUpdate()
  • Unmount周期，执行顺序：componentWillUnmount()