React基础

React学习笔记

1 React基础

1.1 概述

React是一个用于构建用户界面的JavaScript库。React主要用来写HTML页面，或构建Web应用。从MVC的角度看，React仅仅是视图层。React相对于Vue更灵活（all in js）

需要依赖三个库：

• react：包含reacy所必须的核心代码
• react-dom：react渲染在不同平台所需要的核心代码：React、React-Native、React-VR
• babel：将jsx转换成react代码的工具

1.2 基本使用

// 方法一
// 1 创建react元素（了解，不推荐此方法）
const title = React.createElement('h1', null, 'Hello React!!')
// 2 渲染创建好的react元素
ReactDOM.render(title, document.getElementById('root'))

// 方法二 使用JSX（常用）
ReactDOM.render(<h1>hello react</h1>, document.querySelector('#root'))

最新的react18不推荐使用ReactDOM.render()函数，推荐以下方式

• ReactDOM.createRoot()：用于创建一个React根，之后渲染的内容会包含在这个根中
• root.render()函数：参数：要渲染的根组件（参数可以是HTML元素，可以是组件）
• {}：插值语法，类似于Vue中的插值语法

const root = ReactDOM.createRoot(document.querySelector('#root'))
root.render(<h2>hello root</h2>)

const app = ReactDOM.createRoot(document.querySelector('#app'))
app.render(<h2>hello app</h2>)

在编写React的script代码中，必须添加type="text/babel"，作用是可以让babel解析jsx语法

1.3 组件化

React中的组件分为类组件和函数组件，以下先学习类组件

数据依赖

• 参与界面更新的数据：当数据变化时，需要更新组件渲染的内容
• 不参与界面更新的数据：当数据变化时，不需要更新组件渲染的内容

当我们的数据发生变化时，我们可以调用this.setState来更新数据，并且通知React进行update操作；在进行update操作时，会重新调用render函数，并且使用最新的数据来渲染界面。需要绑定this

class App extends React.Component {
    constructor() {
        super();
        this.state = {
            message: "Hello World"
        }
        this.btnClick = this.btnClick.bind(this)
    }
    
    // 组件方法
    btnClick() {
        this,setState({
            message: "Hello React"
        })
    }
    render() {
        return (
            <div>
            	<h2>{this.state.message></h2>
                <button onClick={this.btnClick.bind(this)}>修改文本</button>
                <button onClick={this.btnClick}>修改文本</button>
            </div>
        )
    }
}

1.4 脚手架

使用脚手架的好处

• 脚手架是开发现代 Web 应用的必备
• 充分利用 Webpack、Babel 等工具辅助项目开发
• 关注业务、而不是工具配置
• Vue中的@vue/cli,React中的create-react-app都是脚手架

使用脚手架初始化项目

创建脚手架并初始化项目：npx create-react-app demo

或者先全局安装react脚手架npm install create-react-app -g，然后创建项目create-react-app demo

运行项目：npm start

项目名称不能包含大写字母

2 JSX

2.1 基本使用

介绍

JSX是JavaScript XML的简写，表示在JavaScript代码中写XML（HTML）格式的代码。JSX是React的核心内容

优势：声明式语法更加直观、与HTML结构相同，降低了学习成本，提升开发效率。

JSX的书写规范：

• 只能有一个根元素
• JSX结构通常会有一个小括号，将整个JSX当作一个整体，这样可以方便阅读，并且JSX可以进行换行书写
• JSX中的标签可以是单标签，也可以是双标签（单标签元素必须以/结尾）
• JSX的注释：{ /* JSX的注释写法 */ }

使用步骤

// 1 使用JSX语法，创建react元素，注意：不能加双引号
const title = <h1>Hello JSX</h1>

// 2 渲染创建好的React元素
ReactDOM.render(title, document.getElementById('root'))

为什么脚手架中可以使用JSX语法

• JSX不是标准的ECMAScript语法，它是ECMAScript的语法拓展
• 需要使用babel编译处理后，才能在浏览器环境中使用
• create-react-app脚手架中已经默认有该配置，无需手动配置
• 编译JSX语法的包是：@babel/preset-react

2.2 在JSX中使用JavaScript表达式

嵌入JS表达式

数据存储在JS中，语法：{JavaScript表达式}。与Vue的插值语法区分，为单括号而非双括号

const name = 'Jack'
const dv = {
    <div>你好，我叫：{name}</div>
}

注意点

• 单大括号中可以使用任意的JavaScript表达式

• JSX也是JS表达式

• JS中的对象是一个例外 ，一般只会出现在style属性中
• 不能在{}中出现语句（比如if/for等）

const h1 = <h1>我是JSX</h1>
const dv = {
    <div>嵌入表达式：{h1}</div>
}

JSX插入内容：

• Number、String、Array直接显示出来
• undefined、null、Boolean不显示（若想让其显示，则需要把它转换为字符串类型：String()或+””或.toString()）
• object类型不能作为子元素进行显示（显示方法：Object.keys(friend)[0]）
• 可以插入对应的表达式。例：{10 + 20}

2.3 JSX的列表渲染

// 列表渲染
// 技术方案：map 重复渲染的是哪个模板 就return谁
// 注意事项：遍历列表时同样需要一个类型为number/string不可重复的key 提高diff性能
// key仅仅在内部使用，不会出现在真实的dom结构中

const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
]

function App() {
  return (
    <div className="App">
      <ul>
        {songs.map(song => <li key={song.id}>{song.name}</li>)}
      </ul>
    </div>
  );
}

2.4 JSX的条件渲染

// 来个布尔值
const flag = true
function App() {
  return (
    <div className="App">
      {/* 条件渲染字符串 */}
      {flag ? 'react真有趣' : 'vue真有趣'}
      {/* 条件渲染标签/组件 */}
      {flag ? <span>this is span</span> : null}
    </div>
  )
}
export default App

2.5 JSX样式处理

行内样式

function App() {
  return (
    <div className="App">
      <div style={{ color: 'red' }}>this is a div</div>
    </div>
  )
}

export default App

行内样式（更优写法）

const styleObj = {
    color: 'red'
}

function App() {
  return (
    <div className="App">
      <div style={ styleObj }>this is a div</div>
    </div>
  )
}

export default App

类名-className（推荐）

/* app.css */
.title {
  font-size: 30px;
  color: blue;
}

// App.js
import './app.css'
function App() {
  return (
    <div className="App">
      <div className="title">this is a div</div>
    </div>
  )
}

export default App

类名-className-动态类名控制

// App.js
import './app.css'
const showTitle = true
function App() {
  return (
    <div className="App">
      <div className={ showTitle ? 'title' : ''}>this is a div</div>
    </div>
  )
}
export default App

2.6 JSX注意事项

1、JSX必须有一个根节点，如果没有根节点，可以使用<></>（幽灵节点）替代

2、所有标签必须形成闭合、成对闭合或者自闭合都可以

3、JSX中的语法更加贴近JS语法，属性名采用驼峰命名法，class->className、for->htmlFor、tabindex->tabIndex

4、JSX支持多行（换行），如果需要换行，需使用()包裹，防止bug出现

5、没有子节点的React元素可以用/>结束

6、推荐：使用小括号包裹JSX，从而避免JS中的自动插入分号陷阱

const dv = {
    <div>Hello JSX<span /></div>
}

3 组件基础

3.1 组件概念

3.2 函数组件

使用JS的函数（或箭头函数）创建的组件，就叫做函数组件

组件的定义与渲染

// 定义函数组件
function HelloFn () {
  return <div>这是我的第一个函数组件!</div>
}

// 定义函数组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件，两种方式均可渲染 */}
      <HelloFn />
      <HelloFn></HelloFn>
    </div>
  )
}
export default App

约定说明

1. 组件的名称必须首字母大写，react内部会根据这个来判断是组件还是普通的HTML标签
2. 函数组件必须有返回值，表示该组件的 UI 结构；如果不需要渲染任何内容，则返回 null
3. 组件就像 HTML 标签一样可以被渲染到页面中。组件表示的是一段结构内容，对于函数组件来说，渲染的内容是函数的返回值就是对应的内容
4. 使用函数名称作为组件标签名称，可以成对出现也可以自闭合

3.3 类组件

使用 ES6 的 class 创建的组件，叫做类（class）组件

组件定义与渲染

// 引入React
import React from 'react'

// 定义类组件
class HelloC extends React.Component {
  render () {
    return <div>这是我的第一个类组件!</div>
  }
}

function App () {
  return (
    <div className="App">
      {/* 渲染类组件 */}
      <HelloC />
      <HelloC></HelloC>
    </div>
  )
}
export default App

约定说明

1. 类名称也必须以大写字母开头
2. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
3. 类组件必须提供 render 方法，render 方法必须有返回值，表示该组件的 UI 结构
4. constructor是可选的，我们通常在constructor中初始化一些数据
5. this.state中维护的就是我们组件内部的数据

3.4 事件绑定

如何绑定事件

语法：on + 事件名称 = { 事件处理程序 }，比如：<div onClick={() => {}}></div>

注意：react事件采用驼峰命名法，onMouseEnter、onFocus

// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = () => {
    console.log('事件被触发了')
  }
  return (
    // 绑定事件
    <button onClick={this.clickHandler}>click me!</button>
  )
}

// 类组件
class HelloC extends React.Component {
  // 定义事件回调函数
  clickHandler = () => {
    console.log('事件被触发了')
  }
  render () {
    return (
      // 绑定事件
      <button onClick={this.clickHandler}>click me!</button>
    )
  }
}

获取事件对象

通过事件处理程序的参数获取事件对象e

// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e) => {
    // 阻止默认行为，此处阻止跳转
    e.preventDefault()
    console.log('事件被触发了', e)
  }
  return (
    // 绑定事件
    <a href="http://www.baidu.com/" onClick={clickHandler}>百度</a>
  )
}

传递额外参数

// 函数组件
function HelloFn () {
  // 定义事件回调函数
  const clickHandler = (e, msg) => {
    console.log('事件被触发了', e, msg)
  }
  return (
    // 绑定事件
    <div onClick={(e) => clickHandle(e, 'this is msg')}>click me</div>
  )
}

3.5 组件状态

在react hook出来之前，函数式组件是没有自己的状态的，所以我们通过类组件来说

初始化状态

• 通过class的实例属性state来初始化
• state的值是一个对象结构，表示一个组件可以有多个数据状态

class Counter extends React.Component {
  // 初始化状态
  state = {
    count: 0
  }
  render() {
    return <button>计数器</button>
  }
}

读取状态

通过this.state来获取状态

class Counter extends React.Component {
  // 初始化状态
  state = {
    count: 0
  }
  render() {
    // 读取状态
    return <button>计数器{this.state.count}</button>
  }
}

修改状态

语法：this.setState({ 要修改的部分数据 })

setState方法作用：修改state中的数据状态；更新UI

思想：数据驱动视图，也就是只要修改数据状态，那么页面就会自动刷新，无需自动操作dom

注意事项：不要直接修改state中的值，必须通过setState方法进行修改（这个方法由继承得到）

class Counter extends React.Component {
  // 定义数据
  state = {
    count: 0
  }
  // 定义修改数据的方法
  setCount = () => {
    this.setState({
      count: this.state.count + 1
    })
  }
  // 使用数据 并绑定事件
  render () {
    return <button onClick={this.setCount}>{this.state.count}</button>
  }
}

3.6 this问题说明

箭头函数的this是父级的this，箭头函数本身没有this（ES6）

render函数的this已经被react内部做了修正，这里的this就是指向当前的组件实例对象

类中的函数使用this：

• 普通函数，在构造函数中绑定this或者在调用函数时绑定this
• 箭头函数，默认继承父类的this，即指向这个类的实例
• 在箭头函数中调用普通函数，隐式绑定，this不变（最常用）（传递参数明确，调用函数默认传一个event）

3.7 React的状态不可变

不要直接修改状态的值，而是基于当前状态创建新的状态值

错误的直接修改

state = {
  count : 0,
  list: [1,2,3],
  person: {
     name:'jack',
     age:18
  }
}
// 直接修改简单类型Number
this.state.count++
++this.state.count
this.state.count += 1
this.state.count = 1

// 直接修改数组
this.state.list.push(123)
this.state.list.spice(1,1)

// 直接修改对象
this.state.person.name = 'rose'

基于当前状态创建新值

this.setState({
    count: this.state.count + 1
    list: [...this.state.list, 4],
    // 修改为原数组后面加上4
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
})

删除

this.setState({
    // 删除值为2的元素
    list: this.state.list.filter(item => item  !== 2)
})

3.8 表单处理

使用React处理表单元素，一般有两种方式：

1. 受控组件 （推荐使用）
2. 非受控组件 （了解）

受控表单组件

什么是受控组件？ input框自己的状态被React组件状态控制

React组件的状态的地方是在state中，input表单元素也有自己的状态是在value中，React将state与表单元素的值（value）绑定到一起，由state的值来控制表单元素的值，从而保证单一数据源特性

实现步骤

以获取文本框的值为例，受控组件的使用步骤如下：

1. 在组件的state中声明一个组件的状态数据
2. 将状态数据设置为input标签元素的value属性的值
3. 为input添加change事件，在事件处理程序中，通过事件对象e获取到当前文本框的值（即用户当前输入的值）
4. 调用setState方法，将文本框的值作为state状态的最新值

注意：绑定value时必须绑定onChange事件，否则input框将变为只读

代码落地

import React from 'react'

class InputComponent extends React.Component {
  // 声明组件状态
  state = {
    message: 'this is message',
  }
  // 声明事件回调函数
  changeHandler = (e) => {
    this.setState({ message: e.target.value })
  }
  render () {
    return (
      <div>
        {/* 绑定value 绑定事件*/}
        <input value={this.state.message} onChange={this.changeHandler} />
      </div>
    )
  }
}


function App () {
  return (
    <div className="App">
      <InputComponent />
    </div>
  )
}
export default App

非受控表单组件

非受控组件就是通过手动操作dom的方式获取文本框的值，文本框的状态不受react组件的state中的状态控制，直接通过原生dom获取输入框的值

实现步骤

1. 导入createRef 函数
2. 调用createRef函数，创建一个ref对象，存储到名为msgRef的实例属性中
3. 为input添加ref属性，值为msgRef
4. 在按钮的事件处理程序中，通过msgRef.current即可拿到input对应的dom元素，而其中msgRef.current.value拿到的就是文本框的值

代码落地

import React, { createRef } from 'react'

class InputComponent extends React.Component {
  // 使用createRef产生一个存放dom的对象容器
  // msgRef实例属性是可以自定义的 语义化即可
  msgRef = createRef()

  changeHandler = () => {
    // 通过msgRef获取input value值
    console.log(this.msgRef.current.value)
  }

  // 产出UI模板结构
  render() {
    return (
      <div>
        {/* ref绑定 获取真实dom */}
        <input ref={this.msgRef} />
        <button onClick={this.changeHandler}>click</button>
      </div>
    )
  }
}

function App () {
  return (
    <div className="App">
      <InputComponent />
    </div>
  )
}
export default App

4 组件通信

4.1 组件通信的意义

组件是独立且封闭的单元，默认情况下组件只能使用自己的数据（state），组件化开发的过程中，完整的功能会拆分多个组件，在这个过程中不可避免的需要互相传递一些数据，为了能让各组件之间可以进行互相沟通，数据传递，这个过程就是组件通信

• 父子关系 - 最重要的

• 兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信

• 其它关系 - mobx / redux / 基于hook的方案（状态管理方案，Vue中使用Vuex）

4.2 父传子实现

实现步骤

1. 父组件提供要传递的数据 - state
2. 给子组件标签添加属性值为 state中的数据

3. 子组件中通过 props 接收父组件中传过来的数据

4. 1. 类组件使用this.props获取props对象
   2. 函数式组件直接通过参数获取props对象

代码实现

import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  return (
    <div>
      子组件1
      {props.msg}
    </div>
  )
}

// 类子组件
class CSon extends React.Component {
  render() {
    return (
      <div>
        子组件2
        {this.props.msg}
      </div>
    )
  }
}
// 父组件
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon msg={this.state.message} />
        <CSon msg={this.state.message} />
      </div>
    )
  }
}

export default App

4.3 props说明

props是只读对象

根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改

props可以传递任意数据

数字、字符串、布尔值、数组、对象、函数、JSX

import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  return (
    <div>
      函数组件
      {props.msg}-
      {props.age}-
      {props.child}
      {props.list.map((item) => <ul key={item}>{item}</ul>)}
      <button onClick={props.cb}>点击触发父组件的函数</button>
    </div>
  )
}

class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon 
          msg={this.state.message} 
          age={20} 
          isMan={true} 
          cb={() => { console.log(1) }} 
          list={[1, 2, 3]}
          child={<span>this is child</span>}
        />
      </div>
    )
  }
}

export default App

props的解构赋值

解构赋值：用就解构，不用就不解构

第一种

import React from 'react'

// 函数式子组件
function FSon(props) {
  console.log(props)
  const {list, msg, age, cb, child} = props
  return (
    <div>
      函数组件
      {list.map(item => <p key={item}>{item}</p>)}
      {msg}
      {age}
      {child}
      <button onClick={cb}>点击触发父组件函数</button>
    </div>
  )
}

class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon 
          msg={this.state.message} 
          age={20} 
          cb={() => { console.log(1) }} 
          list={[1, 2, 3]}
          child={<span>this is child</span>}
        />
      </div>
    )
  }
}

export default App

第二种

import React from 'react'

// 函数式子组件
function FSon({list, msg, age, cb, child}) {
  return (
    <div>
      函数组件
      {list.map(item => <p key={item}>{item}</p>)}
      {msg}
      {age}
      {child}
      <button onClick={cb}>点击触发父组件函数</button>
    </div>
  )
}

class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <FSon 
          msg={this.state.message} 
          age={20} 
          cb={() => { console.log(1) }} 
          list={[1, 2, 3]}
          child={<span>this is child</span>}
        />
      </div>
    )
  }
}

export default App

4.4 子传父实现

口诀： 父组件给子组件传递回调函数，子组件调用

实现步骤

1. 父组件提供一个回调函数 - 用于接收数据
2. 将函数作为属性的值，传给子组件
3. 子组件通过props调用 回调函数
4. 将子组件中的数据作为参数传递给回调函数

代码一

import React from 'react'

// 父传子 props函数
// 子传父 子组件调用父组件传递过来的函数，并且把想要传递的数据当成函数的实参，传入即可
function Son(props){
  const {getSonMsg} = props
  return (
    <div>this is son<button onClick={()=>getSonMsg('这里是来自于子组件中的数据')}>click</button></div>
  )
}

class App extends React.Component {
  state = {
    list: [1, 2, 3]
  }
  getSonMsg = (sonMsg) => {
    console.log(sonMsg)
  }
  render() {
    return (
      <div>
        <Son getSonMsg={this.getSonMsg} />
      </div>
    )
  }
}

export default App

代码二

import React from 'react'

// 子组件
function Son(props) {
  function handleClick() {
    // 调用父组件传递过来的回调函数 并注入参数
    props.changeMsg('this is newMessage')
  }
  return (
    <div>
      {props.msg}
      <button onClick={handleClick}>change</button>
    </div>
  )
}


class App extends React.Component {
  state = {
    message: 'this is message'
  }
  // 提供回调函数
  changeMessage = (newMsg) => {
    console.log('子组件传过来的数据:',newMsg)
    this.setState({
      message: newMsg
    })
  }
  render() {
    return (
      <div>
        <div>父组件</div>
        <Son
          msg={this.state.message}
          // 传递给子组件
          changeMsg={this.changeMessage}
        />
      </div>
    )
  }
}

export default App

4.5 兄弟组件通信

核心思路： 通过状态提升机制，利用共同的父组件实现兄弟通信

实现步骤

1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

• • 提供共享状态
  • 提供操作共享状态的方法

1. 要接收数据状态的子组件通过 props 接收数据
2. 要传递数据状态的子组件通过props接收方法，调用方法传递数据

import React from 'react'

// 子组件A
function SonA(props) {
  return (
    <div>
      SonA
      {props.msg}
    </div>
  )
}
// 子组件B
function SonB(props) {
  return (
    <div>
      SonB
      <button onClick={() => props.changeMsg('new message')}>changeMsg</button>
    </div>
  )
}

// 父组件
class App extends React.Component {
  // 父组件提供状态数据
  state = {
    message: '这是来自于B组件的数据'
  }
  // 父组件提供修改数据的方法
  changeMsg = (newMsg) => {
    this.setState({
      message: newMsg
    })
  }

  render() {
    return (
      <>
        {/* 接收数据的组件 */}
        <SonA msg={this.state.message} />
        {/* 修改数据的组件 */}
        <SonB changeMsg={this.changeMsg} />
      </>
    )
  }
}

export default App

4.6 跨组件通信Context

上图是一个react形成的嵌套组件树，如果我们想从App组件向任意一个下层组件传递数据，该怎么办呢？目前我们能采取的方式就是一层一层的props往下传，显然很繁琐

那么，Context 提供了一个无需为每层组件手动添加 props，就能在组件树间进行数据传递的方法

实现步骤

1. 创建Context对象 导出 Provider 和 Consumer对象

const { Provider, Consumer } = createContext()

1. 使用Provider包裹根组件提供数据

<Provider value={this.state.message}>
    {/* 根组件 */}
</Provider>

1. 需要用到数据的组件使用Consumer包裹获取数据

<Consumer >
    {value => /* 基于 context 值进行渲染*/}
</Consumer>

代码实现

import React, { createContext }  from 'react'

// 1. 创建Context对象 
const { Provider, Consumer } = createContext()


// 3. 消费数据
function ComC() {
  return (
    <Consumer >
      {value => <div>{value}</div>}
    </Consumer>
  )
}

function ComA() {
  return (
    <ComC/>
  )
}

// 2. 提供数据
class App extends React.Component {
  state = {
    message: 'this is message'
  }
  render() {
    return (
      <Provider value={this.state.message}>
        <div className="app">
          <ComA />
        </div>
      </Provider>
    )
  }
}

export default App

5 组件进阶

5.1 children属性

children属性表示该组件的子节点。只要组件内部有子节点，props中就有该属性

children属性可以是普通文本，普通标签元素，函数，JSX

5.2 props校验-场景和使用

对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就有可能会导致组件内部错误，有一个点很关键组件的使用者可能报错了也不知道为什么，看下面的例子

const List = props => {
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item.name}</li>)
  return {
    <ul>{lis}</ul>
  }
}

面对这样的问题，如何解决？props校验

实现步骤

1. 安装属性校验包：yarn add prop-types
2. 导入prop-types 包
3. 使用 组件名.propTypes = {} 给组件添加校验规则

核心代码

import PropTypes from 'prop-types'

const List = props => {
  const arr = props.colors
  const lis = arr.map((item, index) => <li key={index}>{item.name}</li>)
  return <ul>{lis}</ul>
}

List.propTypes = {
  colors: PropTypes.array
}

5.3 props校验-规则说明

四种常见结构

1. 常见类型：array、bool、func、number、object、string
2. React元素类型：element
3. 必填项：isRequired
4. 特定的结构对象：shape({})

核心代码

// 常见类型
optionalFunc: PropTypes.func,
// 必填的函数项 只需要在类型后面串联一个isRequired
requiredFunc: PropTypes.func.isRequired,
// 特定结构的对象
optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
})

官网文档更多阅读：https://reactjs.org/docs/typechecking-with-proptypes.html

5.4 props校验-默认值

通过 defaultProps 可以给组件的props设置默认值，在未传入props的时候生效

函数组件

直接使用函数参数默认值

function List({pageSize = 10}) {
  return (
    <div>
      此处展示props的默认值：{ pageSize }
    </div>
  )
}

// 不传入pageSize属性
<List />

类组件

使用类静态属性声明默认值，static defaultProps = {}

class List extends Component {
  static defaultProps = {
    pageSize: 10
  }
    
  render() {
    return (
      <div>
        此处展示props的默认值：{this.props.pageSize}
      </div>
    )
  }
}
<List />

5.5 生命周期-概述

组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程，注意，只有类组件才有生命周期（类组件 实例化 函数组件 不需要实例化）

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

不常用的生命周期:

• getDerivedStateFromProps：state的值在任何时候都依赖于props使用；该方法返回一个对象来更新state
• getSnapshotBeforeUpdate：在React更新DOM之间回调的一个函数，可以获取DOM更新前的一些信息（比如滚动信息）
• shouldComponentUpdate：控制render函数是否更新state信息（较为常用）

5.6 生命周期-挂载阶段

钩子函数	触发时机	作用
constructor	创建组件时，最先执行，初始化的时候只执行一次	1. 初始化state 2. 创建 Ref 3. 使用 bind 解决 this 指向问题等
render	每次组件渲染都会触发	渲染UI（注意： 不能在里面调用setState() ）
componentDidMount	组件挂载（完成DOM渲染）后执行，初始化的时候执行一次	1. 发送网络请求 2.DOM操作

5.7 生命周期-更新阶段

钩子函数	触发时机	作用
render	每次组件渲染都会触发	渲染UI（与 挂载阶段 是同一个render）
componentDidUpdate	组件更新后（DOM渲染完毕）	DOM操作，可以获取到更新后的DOM内容，不要直接调用setState

5.8 生命周期-卸载阶段

钩子函数	触发时机	作用
componentWillUnmount	组件卸载（从页面中消失）	执行清理工作（比如：清理定时器等）

6 Hooks基础

6.1 Hooks概念理解

什么是hooks

Hooks的本质：一套能够使函数组件更强大，更灵活的“钩子”

React体系里组件分为 类组件 和 函数组件

经过多年的实战，函数组件是一个更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生

注意点：

1. 有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以使用
2. 有了hooks之后，不能在把函数成为无状态组件了，因为hooks为函数组件提供了状态
3. hooks只能在函数组件中使用

Hooks解决了什么问题

Hooks的出现解决了俩个问题 1. 组件的状态逻辑复用 2.class组件自身的问题

1. 组件的逻辑复用
   在hooks出现之前，react先后尝试了 mixins混入，HOC高阶组件，render-props等模式
   但是都有各自的问题，比如mixin的数据来源不清晰，高阶组件的嵌套问题等等
2. class组件自身的问题
   class组件就像一个厚重的‘战舰’ 一样，大而全，提供了很多东西，有不可忽视的学习成本，比如各种生命周期，this指向问题等等，而我们更多时候需要的是一个轻快灵活的’快艇’

6.2 useState

基础使用

作用

useState为函数组件提供状态（state）

使用步骤

1. 导入 useState 函数
2. 调用 useState 函数，并传入状态的初始值
3. 从useState函数的返回值中，拿到状态和修改状态的方法
4. 在JSX中展示状态
5. 调用修改状态的方法更新状态

代码实现

import { useState } from 'react'

function App() {
  // 参数：状态初始值比如,传入 0 表示该状态的初始值为 0
  // 返回值：数组,包含两个值：1 状态值（state） 2 修改该状态的函数（setState）
  // 即点击按钮值加1
  const [count, setCount] = useState(0)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

状态的读取和修改

读取状态

该方式提供的状态，是函数内部的局部变量，可以在函数内的任意位置使用

修改状态

1. setCount是一个函数，参数表示最新的状态值
2. 调用该函数后，将使用新值替换旧值
3. 修改状态后，由于状态发生变化，会引起视图变化

注意事项

修改状态的时候，一定要使用新的状态替换旧的状态，不能直接修改旧的状态，尤其是引用类型

组件的更新过程

函数组件使用 useState hook 后的执行过程，以及状态值的变化

• 组件第一次渲染

1. 1. 从头开始执行该组件中的代码逻辑
   2. 调用 useState(0) 将传入的参数作为状态初始值，即：0
   3. 渲染组件，此时，获取到的状态 count 值为： 0

• 组件第二次渲染

1. 1. 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染
   2. 组件重新渲染时，会再次执行该组件中的代码逻辑
   3. 再次调用 useState(0)，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1
   4. 再次渲染组件，此时，获取到的状态 count 值为：1

注意：useState 的初始值(参数)只会在组件第一次渲染时生效。也就是说，以后的每次渲染，useState 获取到都是最新的状态值，React 组件会记住每次最新的状态值

import { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
  // 在这里可以进行打印测试
  console.log(count)
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}
export default App

使用规则

1. useState 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态

function List(){
  // 以字符串为初始值
  const [name, setName] = useState('cp')
  // 以数组为初始值
  const [list,setList] = useState([])
}

1. useState 注意事项

2. a. 只能出现在函数组件中

3. b. 不能嵌套在if/for/其它函数中（react按照hooks的调用顺序识别每一个hook）

let num = 1
function List(){
  num++
  if(num / 2 === 0){
     const [name, setName] = useState('cp') 
  }
  const [list,setList] = useState([])
}
// 俩个hook的顺序不是固定的，这是不可以的！！！

1. c.可以通过开发者工具查看hooks状态

6.3 useEffect

理解函数副作用

什么是副作用

副作用是相对于主作用来说的，一个函数除了主作用，其他的作用就是副作用。对于 React 组件来说，主作用就是根据数据（state/props）渲染 UI，除此之外都是副作用（比如，手动修改 DOM）

常见的副作用

1. 数据请求 ajax发送
2. 手动修改dom
3. localstorage操作

useEffect函数的作用就是为react函数组件提供副作用处理的！

基础使用

本节任务: 能够学会useEffect的基础用法并且掌握默认的执行执行时机

作用

为react函数组件提供副作用处理

使用步骤

1. 导入 useEffect 函数
2. 调用 useEffect 函数，并传入回调函数
3. 在回调函数中编写副作用处理（dom操作）
4. 修改数据状态
5. 检测副作用是否生效

代码实现

import { useEffect, useState } from 'react'

function App() {
  const [count, setCount] = useState(0)
 
  useEffect(()=>{
    // dom操作
    document.title = `当前已点击了${count}次`
  })
  return (
    <button onClick={() => { setCount(count + 1) }}>{count}</button>
  )
}

export default App

依赖项控制执行时机

本节任务: 能够学会使用依赖项控制副作用的执行时机

1. 不添加依赖项

组件首次渲染执行一次，以及不管是哪个状态更改引起组件更新时都会重新执行

1. 组件初始渲染
2. 组件更新 （不管是哪个状态引起的更新）

useEffect(()=>{
    console.log('副作用执行了')
})

2. 添加空数组

组件只在首次渲染时执行一次

useEffect(()=>{
     console.log('副作用执行了')
},[])

3. 添加特定依赖项

副作用函数在首次渲染时执行，在依赖项发生变化时重新执行

function App() {  
    const [count, setCount] = useState(0)  
    const [name, setName] = useState('zs') 
    
    useEffect(() => {    
        console.log('副作用执行了')  
    }, [count])  
    
    return (    
        <>      
         <button onClick={() => { setCount(count + 1) }}>{count}</button>      
         <button onClick={() => { setName('cp') }}>{name}</button>    
        </>  
    )
}

注意事项

useEffect 回调函数中用到的数据（比如，count）就是依赖数据，就应该出现在依赖项数组中，如果不添加依赖项就会有bug出现

7 Hooks进阶

7.1 useState-回调函数的参数

使用场景

参数只会在组件的初始渲染中起作用，后续渲染时会被忽略。如果初始 state 需要通过计算才能获得，则可以传入一个函数，在函数中计算并返回初始的 state，此函数只在初始渲染时被调用

语法

const [name, setName] = useState(()=>{   
  // 编写计算逻辑    return '计算之后的初始值'
})

语法规则

1. 回调函数return出去的值将作为 name 的初始值
2. 回调函数中的逻辑只会在组件初始化的时候执行一次

语法选择

1. 如果就是初始化一个普通的数据 直接使用 useState(普通数据) 即可
2. 如果要初始化的数据无法直接得到需要通过计算才能获取到，使用useState(()=>{})

来个需求

import { useState } from 'react'

function Counter(props) {
  const [count, setCount] = useState(() => {
    return props.count
  })
  return (
    <div>
      <button onClick={() => setCount(count + 1)}>{count}</button>
    </div>
  )
}

function App() {
  return (
    <>
      <Counter count={10} />
      <Counter count={20} />
    </>
  )
}

export default App

7.2 useEffect-清理副作用

使用场景

在组件被销毁时，如果有些副作用操作需要被清理，就可以使用此语法，比如常见的定时器

语法及规则

useEffect(() => {   
    console.log('副作用函数执行了')    
    // 副作用函数的执行时机为: 在下一次副作用函数执行之前执行   
    return () => {      
        console.log('清理副作用的函数执行了')      
        // 在这里写清理副作用的代码    
    }
})

定时器小案例

添加副作用函数前：组件虽然已经不显示了，但是定时器依旧在运行

import { useEffect, useState } from 'react'
function Foo() {  
    useEffect(() => {    
        setInterval(() => {     
            console.log('副作用函数执行了')    
        }, 1000)  
    }) 
    return <div>Foo</div>  
}


function App() {  
    const [flag, setFlag] = useState(true)  
    return (    
        <>      
          <button onClick={() => setFlag(false)}>click</button>      
         {flag ? <Foo/> : null}    
        </>  
    )
}

export default App

添加清理副作用函数后：一旦组件被销毁，定时器也被清理

import { useEffect, useState } from 'react'

function Foo() {  
    useEffect(() => {   
        const timerId = setInterval(() => {      
            console.log('副作用函数执行了')    
        }, 1000)   
        // 添加清理副租用函数    
        return () => {      
            clearInterval(timerId)    
        }  
    })  
    return <div>Foo</div>
}
function App() {  
    const [flag, setFlag] = useState(true)  
    return (   
        <>      
          <button onClick={() => setFlag(false)}>click</button>      
         {flag ? <Foo/> : null}    
        </>    
    )
}

export default App

7.3 useEffect-发送网络请求

使用场景

如何在useEffect中发送网络请求，并且封装同步 async await操作

语法要求

不可以直接在useEffect的回调函数外层直接包裹 await ，因为异步会导致清理函数无法立即返回

useEffect(async ()=>{    
    const res = await axios.get('http://geek.itheima.net/v1_0/channels')   
    console.log(res)
},[])

正确写法

在内部单独定义一个函数，然后把这个函数包装成同步

useEffect(()=>{   
    async function fetchData(){      
       const res = await axios.get('http://geek.itheima.net/v1_0/channels')                            console.log(res)   
    } 
},[])

7.4 useRef

使用场景

在函数组件中获取真实的dom元素对象或者是组件对象

使用步骤

1. 导入 useRef 函数
2. 执行 useRef 函数并传入null，返回值为一个对象 内部有一个current属性存放拿到的dom对象（组件实例）
3. 通过ref 绑定 要获取的元素或者组件

获取dom

import { useEffect, useRef } from 'react'
function App() {  
    const h1Ref = useRef(null)  
    useEffect(() => {    
        console.log(h1Ref)  
    },[])  
    return (    
        <div>      
            <h1 ref={ h1Ref }>this is h1</h1>    
        </div>  
    )
}
export default App

获取组件实例

函数组件由于没有实例，不能使用ref获取，如果想获取组件实例，必须是类组件

class Foo extends React.Component {  
    sayHi = () => {    
        console.log('say hi')  
    }  
    render(){    
        return <div>Foo</div>  
    }
}
    
export default Foo

import { useEffect, useRef } from 'react'
import Foo from './Foo'
function App() {  
    const h1Foo = useRef(null)  
    useEffect(() => {    
        console.log(h1Foo)  
    }, [])  
    return (    
        <div> <Foo ref={ h1Foo } /></div>  
    )
}
export default App

7.5 useContext

实现步骤

1. 使用createContext 创建Context对象
2. 在顶层组件通过Provider 提供数据
3. 在底层组件通过useContext函数获取数据

代码实现

import { createContext, useContext } from 'react'
// 创建Context对象
const Context = createContext()

function Foo() {  
    return <div>Foo <Bar/></div>
}

function Bar() {  
    // 底层组件通过useContext函数获取数据  
    const name = useContext(Context)  
    return <div>Bar {name}</div>
}

function App() {  
    return (    
        // 顶层组件通过Provider 提供数据    
        <Context.Provider value={'this is name'}>     
            <div><Foo/></div>    
        </Context.Provider>  
    )
}

export default App