React-1

课程内容

React 是什么？

一个用于构建用户界面的 JavaScript 库

命令式编程 和 声明式编程

• 告诉计算机怎么做（How） - 过程
• 告诉计算机我们要什么（What） - 结果

如何使用 React

基于浏览器的模式

• React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件
  • React.createElement(type,props,children);
• ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染
  • ReactDOM.render(element, container, callback)
    • element：要渲染的内容
    • container：要渲染的内容存放容器
    • callback：渲染后的回调函数

babel

babel-standalone.js：在浏览器中处理 JSX

JSX

JSX 是一个基于 JavaScript + XML 的一个扩展语法
- 它可以作为值使用
- 它并不是字符串
- 它也不是HTML
- 它可以配合JavaScript 表达式一起使用

插值表达式

在 JXS 中可以使用 {表达式} 嵌入表达式

表达式：产生值的一组代码的集合

• 变量
• 算术运算
• 函数调用
• ……

注意：分清楚 表达式 与 语句 的区别，if、for、while 这些都是语句，JSX 不支持语句

各种类型内容在插值中的使用

• 注释
  {/注释/}
  {/*
  多行注释
  */}

输出数据类型

• 字符串、数字：原样输出
• 布尔值、空、未定义 会被忽略

列表渲染

• 数组
• 对象
  扩展：虚拟 DOM （virtualDOM） 和 diff

条件渲染

• 三元运算符
• 与或运算符

在属性上使用 表达式

JSX 中的表达式也可以使用在属性上，但是使用的时候需要注意

• 当在属性中使用 {} 的时候，不要使用引号包含

JSX 使用注意事项

• 必须有,且只有一个顶层的包含元素 - React.Fragment
• JSX 不是html，很多属性在编写时不一样
  • className
  • style
• 列表渲染时，必须有 key 值
• 在 jsx 所有标签必须闭合
• 组件的首字母一定大写，标签一定要小写

XSS
为了有效的防止 XSS 注入攻击，React DOM 会在渲染的时候把内容（字符串）进行转义，所以字符串形式的标签是不会作为 HTML 标签进行处理的

基于自动化的集成环境模式 - create-react-app - 脚手架

介绍

通过前面 script 的方式虽然也能完成 React.js 的开发，但是有一个现在前端很重要的特性 - 模块化，无法使用。

Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用 模块化 以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。

这些都通过 Create React App 帮助我们安装并配置好了，开箱即用

安装与使用

通过 npm、yarn、npx 都可以

安装

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

使用

安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>

或者通过 npx 的方式

npx

npx create-react-app <项目名称>

项目目录结构说明

运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

命令脚本

create-react-app 同时也提供了其它一些命令来帮助我们进行开发

npm start

启动一个内置的本地 WebServer，根目录映射到 './public' 目录，默认端口：3000

npm run test

运行 Jest 测试

npm run build

打包应用（准备上线）

组件

对具有一定独立功能的数据与方法的封装，对外暴露接口，有利于代码功能的复用，且不用担心冲突问题。

函数式组件

• 函数的名称就是组件的名称
• 函数的返回值就是组件要渲染的内容

类式组件

• 组件类必须继承 React.Component
• 组件类必须有 render 方法

不从实际案例开始的知识点就是耍 LM

样式

.friend-list {
    border: 1px solid #000000;
    width: 200px;
}
.friend-group dt {
    padding: 10px;
    background-color: rgb(64, 158, 255);
    font-weight: bold;
}
.friend-group dd {
    padding: 10px;
    display: none;
}
.friend-group.expanded dd {
    display: block;
}
.friend-group dd.checked {
    background: green;
}

创建 FriendList 组件

class FriendList extends React.Component {
    render() {
        return (
            <div className="friend-list">
                <div className="friend-group">
                    <dt>家人</dt>
                    <dd>爸爸</dd>
                    <dd>妈妈</dd>
                </div>
                <div className="friend-group">
                    <dt>朋友</dt>
                    <dd>张三</dd>
                    <dd>李四</dd>
                    <dd>王五</dd>
                </div>
                <div className="friend-group">
                    <dt>客户</dt>
                    <dd>阿里</dd>
                    <dd>腾讯</dd>
                    <dd>头条</dd>
                </div>
            </div>
        );
    }
}

组件复用 - 数据抽取

为了提高组件的复用性，通常会把组件中的一些可变数据提取出来

let datas = {
    family: {
        title: '家人',
        list: [
            {name: '爸爸'},
            {name: '妈妈'}
        ]
    },
    friend: {
        title: '朋友',
        list: [
            {name: '张三'},
            {name: '李四'},
            {name: '王五'}
        ]
    },
    customer: {
        title: '客户',
        list: [
            {name: '阿里'},
            {name: '腾讯'},
            {name: '头条'}
        ]
    }
};

props 和 state

• props 父组件传递过来的参数
• state 组件自身状态
  • setState
  • 多个 setState 合并

props 与 state 的区别

state 的主要作用是用于组件保存、控制、修改 自己 的可变状态，在组件内部进行初始化，也可以在组件内部进行修改，但是组件外部不能修改组件的 state
props 的主要作用是让使用该组件的父组件可以传入参数来配置该组件，它是外部传进来的配置参数，组件内部无法控制也无法修改
state 和 props 都可以决定组件的外观和显示状态。通常，props 做为不变数据或者初始化数据传递给组件，可变状态使用 state

组件通信与数据流

在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props - React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

• 父级向子级通信
• 子级向父级通信

React 中的事件

• 大小写问题
• this 问题

课程目标

• 掌握React其他 API 使用：PureComponent、ref、children、dangerouslySetInnerHTML、key
• 掌握函数式组件及常见 hooks 的使用
• 可以独立开发基于Hooks 或 Component 的 todoList 应用

课程内容

PureComponent

PureComponent 提供了一个具有浅比较的 shouldComponentUpdate 方法,其他和 Component 完全一直

ref

• 旧版 - string ref
• 主流 - createRef()
• 注意：在 组件挂载完成之后及更新之后使用

children

• 组件标签对之间的内容会被当做一个特殊的属性 props.children 传入组件内容
• 可以自定义结构的组件的常用形式
  • children
  • 传递函数
  • 传递子组件

dangerouslySetInnerHTML

直接设置标签的 innerHTML

key 的问题

在 React ，组件每次更新时，会生成一个 虚拟DOM，和原有的虚拟DOM进行对比。
如果是批量生成的一组元素，那React就会根据 key 值去做对比

一个列表中的每一项 key 是唯一的
如果列表中发生顺序等操作变化，key 一定要用数据的id

函数式组件

函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件，在早期 react 版本中，被当前纯渲染组件来用

React hooks

React hooks 是React 16.8中的新增功能。它们使您无需编写类即可使用状态和其他React功能

React Hooks 优势

• 简化组件逻辑
• 复用状态逻辑
• 无需使用类组件编写

常用 hook

• useState
  const [state, setState] = useState(initialState);
• useEffect
  类组件
  componentDidMount、componentDidUpdate 和 componentWillUnmount
  需要清除的副作用
• useRef

Hook 使用规则

• 只在最顶层使用 Hook
• 只在 React 函数中调用 Hook
  • React 函数组件中
  • React Hook 中 - 我自己定义 hook 时，可以调用别的hook
• 所有的 hook 必须 以 use