【React】初学笔记

已于 2022-09-19 15:11:14 修改
阅读量143 收藏
点赞数
分类专栏： reactjs frontend javascript 文章标签： react.js javascript 前端
于 2022-07-24 17:42:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45222331/article/details/125958321
版权
frontend 同时被 3 个专栏收录
24 篇文章 0 订阅
订阅专栏
javascript
9 篇文章 0 订阅
订阅专栏
reactjs
1 篇文章 0 订阅
订阅专栏

B站视频地址 柴柴老师
本文内容来源 柴柴老师

#注意：

  1. 严格模式标签 – 会影响useEffect的执行时机 执行两次
    <React.StrictMode></React.StrictMode>

一、JSX

jsx 是同过babel解析的

1. JSX 语法

{ JS 表达式 }
可用的表达式
a. string、number、bool、null、undefined、object{}、object[]
b. 1+2、‘abc’.split(‘’)、[‘a’,‘b’].join(‘-’)
c. func()
特别注意
if 语句/ switch-case 语句/ 变量声明语句，这些叫做语句，不是表达式，不能出现在 {} 中！！

2. JSX 列表渲染

使用数组的 **map** 方法
```javascript// 来个列表
const songs = [
  { id: 1, name: '痴心绝对' },
  { id: 2, name: '像我这样的人' },
  { id: 3, name: '南山南' }
]

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

export default App
```

注意点：需要为遍历项添加 key 属性
1. key 在 HTML 结构中是看不到的，是 React 内部用来进行性能优化时使用
2. key 在当前列表中要唯一的字符串或者数值（String/Number）
3. 如果列表中有像 id 这种的唯一值，就用 id 来作为 key 值
4. 如果列表中没有像 id 这种的唯一值，就可以使用 index（下标）来作为 key 值

3. JSX条件渲染

目标任务: 能够在JSX中实现条件渲染
作用：根据是否满足条件生成HTML结构，比如Loading效果
实现：可以使用 三元运算符 或 逻辑与(&&)运算符
如果要根据多个状态判断显示对应的dom，可以封装函数，在函数中进行判断，并返回即可。

4. JSX样式处理

目标任务: 能够在JSX中实现css样式处理
注意： 存在css全局污染，因为react中集成了css module，所以可以通过index.module.css形式命名css文件；然后在对应js文件中导入import styles from ‘./index.module.css’；最后，在className={style.class名}；若多个className={${style.class名}} or className={${style.class名} ${style.class名}} or className={${style.class名} class名}
a. 行内样式 - style
直接在dom上书写 style={{ color: ‘red’ }}
b. 行内样式 - style - 更优写法
const styleObj = {
color:red
}
直接在dom上书写 style={ styleObj }
c. 类名 - className（推荐）
className 就是 h5中的class
d. 类名 - className - 动态类名控制 (三木运算)
直接在dom上书写 className={ showTitle ? ‘title’ : ‘’}

5. JSX注意事项

目标任务: 掌握JSX在实际应用时的注意事项
a. JSX必须有一个根节点，如果没有根节点，可以使用**<></>（幽灵节点）替代
b. 所有标签必须形成闭合**，成对闭合或者自闭合都可以
c. JSX中的语法更加贴近JS语法，属性名采用驼峰命名法 class使用className class -> className 、 for 循环使用 htmlFor for -> htmlFor
d. JSX支持多行（换行），如果需要换行，需使用() 包裹，防止bug出现

二、React组件

1. 函数组件

目标任务: 能够独立使用函数完成react组件的创建和渲染
**概念：**使用 JS 的函数（或箭头函数）创建的组件，就叫做函数组件

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

// 定义类组件
function App () {
  return (
    <div className="App">
      {/* 渲染函数组件 */}
      <HelloFn />
      <HelloFn></HelloFn>
    </div>
  )
}
export default App

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

2. 类组件

目标任务: 能够独立完成类组件的创建和渲染
使用 ES6 的 class 创建的组件，叫做类（class）组件

注意： 类组件中无法使用React Router v6中的编程式导航（useNavigate ，函数组件可以）

// 引入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

约定说明
a. 类名称也必须以大写字母开头
b. 类组件应该继承 React.Component 父类，从而使用父类中提供的方法或属性
c. 类组件必须提供 render 方法render 方法必须有返回值，表示该组件的 UI 结构

3. 事件绑定

目标任务: 能够独立绑定任何事件并能获取到事件对象e
a. 如何绑定事件
● 语法
on + 事件名称 = { 事件处理程序 } ，比如：<div onClick={()=>{}}>
● 注意点
react事件采用驼峰命名法，比如：onMouseEnter、onFocus
b. 获取事件对象
● 通过事件处理程序的参数获取事件对象e
e.preventDefault() 相当于return， 但是 直接使用 return无效

4. 组件状态

目标任务: 能够为组件添加状态和修改状态的值
一个前提：在react hook出来之前，函数式组件是没有自己的状态的，所以我们统一通过类组件来讲解
在这里插入图片描述

a. 初始化状态

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

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

b. 读取状态

● 通过this.state来获取状态

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

c. 修改状态

● 语法
this.setState({ 要修改的部分数据 })
● setState方法作用
a. 修改state中的数据状态
b. 更新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>
  }
}

d. this问题说明

在这里插入图片描述
这里我们作为了解内容，随着js标准的发展，主流的写法已经变成了class fields，无需考虑太多this问题

e. React的状态不可变

目标任务: 能够理解不可变的意义并且知道在实际开发中如何修改状态
**概念：**不要直接修改状态的值，而是基于当前状态创建新的状态值

  1. 错误的直接修改
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'
  1. 基于当前状态创建新值
this.setState({
    count: this.state.count + 1
    list: [...this.state.list, 4],
    person: {
       ...this.state.person,
       // 覆盖原来的属性 就可以达到修改对象中属性的目的
       name: 'rose'
    }
})

f. 表单处理

目标任务: 能够使用受控组件的方式获取文本框的值
使用React处理表单元素，一般有俩种方式：

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

1. 受控表单组件

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

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

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

2. 非受控表单组件

什么是非受控组件？
非受控组件就是通过手动操作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 = createRef()

  changeHandler = () => {
    console.log(this.msgRef.current.value)
  }

  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

三、React组件通信

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

  1. 父子关系 - 最重要的
  2. 兄弟关系 - 自定义事件模式产生技术方法 eventBus / 通过共同的父组件通信
  3. 其它关系 - mobx / redux / 基于hook的方案

a. 父传子实现

目标任务: 实现父子通信中的父传子，把父组件中的数据传给子组件

实现步骤

  1. 父组件提供要传递的数据 - state
  2. 给子组件标签添加属性值为 state中的数据
  3. 子组件中通过 props 接收父组件中传过来的数据
    a. 类组件使用this.props获取props对象
    b. 函数式组件直接通过参数获取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

props说明

目标任务: 知道props传递时的一些注意事项

  1. props是只读对象（readonly）
    根据单项数据流的要求，子组件只能读取props中的数据，不能进行修改

  2. props可以传递任意数据
    数字、字符串、布尔值、数组、对象、函数、JSX

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) }} 
          child={<span>this is child</span>}
        />
        <CSon msg={this.state.message} />
      </div>
    )
  }
}

在这里插入图片描述

b. 子传父实现

目标任务: 实现父子通信中的子传父

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

  1. 父组件提供一个回调函数 - 用于接收数据
  2. 将函数作为属性的值，传给子组件
  3. 子组件通过props调用 回调函数
  4. 将子组件中的数据作为参数传递给回调函数
    在这里插入图片描述
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

c. 兄弟组件通信

目标任务: 实现兄弟组件之间的通信

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

实现步骤

  1. 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
    ○ 提供共享状态
    ○ 提供操作共享状态的方法
  2. 要接收数据状态的子组件通过 props 接收数据
  3. 要传递数据状态的子组件通过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: 'this is message'
  }
  // 父组件提供修改数据的方法
  changeMsg = (newMsg) => {
    this.setState({
      message: newMsg
    })
  }

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

export default App

d. 跨组件通信Context

目标任务: 了解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

四、React组件进阶

1. children属性

目标任务: 掌握props中children属性的用法

children属性是什么
表示该组件的子节点，只要组件内部有子节点，props中就有该属性
children可以是什么
a. 普通文本
b. 普通标签元素
c. 函数
d. JSX

2. props校验-场景和使用

目标任务: 掌握组件props的校验写法，增加组件的健壮性

对于组件来说，props是由外部传入的，我们其实无法保证组件使用者传入了什么格式的数据，如果传入的数据格式不对，就有可能会导致组件内部错误，有一个点很关键 - 组件的使用者可能报错了也不知道为什么，看下面的例子
在这里插入图片描述
面对这样的问题，如何解决？ 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
}

3. props校验-规则说明

目标任务: 掌握props常见的规则

四种常见结构
a. 常见类型：array、bool、func、number、object、string
b. React元素类型：element
c. 必填项：isRequired
d. 特定的结构对象：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

4. props校验-默认值

目标任务: 掌握如何给组件的props提供默认值

通过 defaultProps 可以给组件的props设置默认值，在未传入props的时候生效
a. 函数组件
直接使用函数参数默认值

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

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

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

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

5. 组件生命周期 - 概述

目标任务: 能够说出组件生命周期一共几个阶段
组件的生命周期是指组件从被创建到挂载到页面中运行起来，再到组件不用时卸载的过程，注意，只有类组件才有生命周期（类组件 实例化 函数组件 不需要实例化）
在这里插入图片描述
生命周期地址

6. 组件生命周期 - 挂载阶段

目标任务: 能够说出在组件挂载阶段执行的钩子函数和执行时机
在这里插入图片描述

7. 组件生命周期 - 更新阶段

目标任务: 能够说出组件的更新阶段的钩子函数以及执行时机
在这里插入图片描述

8. 组件生命周期 - 卸载阶段

目标任务: 能够说出组件的销毁阶段的钩子函数以及执行时机
在这里插入图片描述

五、Hooks基础

1. 什么是hooks

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

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

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

注意点：

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

2. Hooks解决了什么问题

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

3. useState

a. useState作用:

useState为函数组件提供状态（state）
使用步骤

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

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

b. 状态的读取和修改

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

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

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

c. useState 组件的更新过程

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

● 组件第一次渲染
a. 从头开始执行该组件中的代码逻辑
b. 调用 useState(0) 将传入的参数作为状态初始值，即：0
c. 渲染组件，此时，获取到的状态 count 值为： 0
● 组件第二次渲染
a. 点击按钮，调用 setCount(count + 1) 修改状态，因为状态发生改变，所以，该组件会重新渲染
b. 组件重新渲染时，会再次执行该组件中的代码逻辑
c. 再次调用 useState(0)，此时 React 内部会拿到最新的状态值而非初始值，比如，该案例中最新的状态值为 1
d. 再次渲染组件，此时，获取到的状态 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

d. useState 使用规则

  1. useState 函数可以执行多次，每次执行互相独立，每调用一次为函数组件提供一个状态
function List(){
  // 以字符串为初始值
  const [name, setName] = useState('cp')
  // 以数组为初始值
  const [list,setList] = useState([])
}
  1. useState 注意事项
    a. 只能出现在函数组件中
    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的顺序不是固定的，这是不可以的！！！

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

4. useEffect

a. useEffect 什么是副作用

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

b. useEffect 常见的副作用

  1. 数据请求 ajax发送
  2. 手动修改dom
  3. localstorage操作
    useEffect函数的作用就是为react函数组件提供副作用处理的！

c. 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

d. useEffect 依赖项控制执行时机

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

  1. 组件初始渲染
  2. 组件更新 （不管是哪个状态引起的更新）
useEffect(()=>{
    console.log('副作用执行了')
})

添加空数组
组件只在首次渲染时执行一次

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

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

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注意事项

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

六、Hooks进阶

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

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

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)   
    } 
},[])

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

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

七、React Router

传送门

八、React 状态管理

第一种方式 redux 传送门
第二种方式 mobx 传送门 暂无

崽崽攻城狮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-Hooks的理解
读心悦
03-01 906
类组件和函数组件： 类组件是基于ES6 Class的写法，通过继承React.Component得到的react组件。 函数组件，就是以函数的形式存在的react组件。 两种组件的区别： 1、类组件需要继承class，函数组件不需要； 2、类组件可以访问生命周期，函数组件不可以； 3、类组件可以获取实例话后的this，并基于this做其他很多的事情，而函数组件不可以； 4、类组件可以维护state，函数组件不可以。 类组件是面向对象编程的一种表现，react类组件内部预置很多的API，我们直接调用/定制，
hooks 基础
qq_43806488的博客
05-04 317
hooks 基础 hooks概念 什么是hooks？ Hooks的本质：一套能够使函数组件更强大，更灵活的“钩子” React体系里组件分为 类组件 和 函数组件 经过多年的实战，函数组件是一个更加匹配React的设计理念 UI = f(data)，也更有利于逻辑拆分与重用的组件表达形式，而先前的函数组件是不可以有自己的状态的，为了能让函数组件可以拥有自己的状态，所以从react v16.8开始，Hooks应运而生 注意点: 有了hooks之后，为了兼容老版本，class类组件并没有被移除，俩者都可以
hooks基础
kkddqq1121的博客
08-19 110
创建方式 函数组件 function App(){} 类组件 class App(){} 外观视图 容器组件:负责一个页面(一个容器) 处理数据 视图组件:负责展示某一块内容 是否有状态 state 有状态组件 无状态组件 函数组件-视图组件-无状态组件 类组件-容器组件-有状态组件
React：Hooks的基础认识
xihuhu的博客
11-17 397
1.什么是hooks Hooks：在单词本意为钩子，钩住，所以由此可以得知Hooks可以让你在函数组件里“钩住”React state以及生命周期等特性的函数。是React16.8所更新的新增特性。它可以让你在不编写class的情况下使用state以及其他的React特性 它的主要作用：为函数组件提供状态，生命周期等原本只能在类组件中才提供的功能 注：1.Hooks只能在函数组件中使用 2.可以理解为通过Hooks为函数组件钩入class组件的特性 2.为什么需要Hooks 为什...
react的问题 类型“Readonly＜{}＞”上不存在属性“val”解决 及原因
qq_45641978的博客
04-29 532
import React, { Component } from 'react' interface Test { // loading:boolean; val:number } export default class Essay extends Component<any,Test> { // 第一个参数表示props的类型 第二个表示state类型 constructor(props:any){ super(props) // super要有
React Native 基础学习笔记.rar
01-28
总的来说，“React Native基础学习笔记”可能涵盖以上所有内容，帮助初学者逐步掌握React Native的各个方面，从基础知识到高级特性，再到实际项目开发的实践经验。通过深入学习和实践，开发者可以充分利用React ...
vue和react学习笔记.rar
10-26
本压缩包包含的“vue和react学习笔记”是针对这两个框架的学习资源，旨在帮助初学者快速入门。 Vue.js是一个轻量级的JavaScript框架，它以简洁的API和易于上手的特点受到了开发者们的喜爱。Vue的核心特性包括声明式...
React学习笔记之事件处理（二）
08-30
本文主要探讨了React中如何处理事件，并提供了相关的示例代码，旨在帮助初学者更好地理解和运用React事件。 首先，React事件的命名遵循驼峰式命名规则，而非传统HTML中的全小写。例如，在HTML中，我们可能会看到`...
notes_of_React:react学习笔记和记录
05-16
这个“notes_of_React”压缩包文件很可能包含了一位开发者在学习React过程中所做的详细笔记和实践记录，这对于初学者或者需要复习React概念的人来说是一份宝贵的资源。 在React中，最重要的概念就是组件化。组件是...
demandpad:像初学者教程一样，基于React的笔记应用程序！
05-05
它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。npm run eject 注意：这是单向操作。 eject ，...
react&antd（7）data is read-only 的只读问题解决
郑板桥30的博客
09-25 2217
经过排查后发现是一个很低级的错误，因为const定义的是常量，无法对data再进行操作了，这里只需把const换为let就可以了。在日常工作中我们经常会遇到有一些字段不是必传到后端那边的，而是根据用户是否对该字段来进行操作再决定是否传给后端。思路：判断state的该字段的值是否为默认值，如果不是的话就通过解构来把该字段加进去。但是这样写会报错提示 data is read-only。
React TypeScript 报错 Readonly 不存在属性"字段名"
Z姑娘早安
05-10 3235
React TypeScript 报错类型"Readonly<{}>“上不存在属性"字段名” react项目中ts报错代码如下： onAddTabBar = () => { let _panes = this.state.panes.concat([{ title: `Tab ${this.state.panes.length + 1}`, content: 'Content of Tab 2', key: this.state.panes.length + 1 }]) t
react hooks 实现原理
weixin_34384681的博客
01-28 3190
react hooks 实现 Hooks 解决了什么问题 在 React的设计哲学中，简单的来说可以用下面这条公式来表示： UI = f(data) 复制代码等号的左边时 UI 代表的最终画出来的界面；等号的右边是一个函数，也就是我们写的 React 相关的代码；data 就是数据，在 React 中，data 可以是 state 或者 props。UI 就是把 data 作为参数传递给 f 运...
双目运算、三目运算在JSX中的应用，如三目运算第二个为null表达式可用双目运算代替
jun的博客
12-06 707
{ field.errorMsg !== '' && <div className='errorTipStyle'> {field.errorMsg} </div&gt...
react input 只读
caoyan0829的博客
05-28 9337
只读   readonly    按第二种写就会警告，     所以应该按第一种写 readOnly   深圳的加一下群吧，一起交流，面试内推线下活动等等 最后分享一个公众号二维码，写一些散文和影评等，欢迎关注。 ...
react项目中typeScript提示：类型“Readonly＜{}＞”上不存在属性“count”。ts(23
u010234868的专栏
04-25 1152
源代码如下： class NewPage extends React.Component { constructor(props:any) { super(props); this.state = { count: 1 } } render() { return ( <div>{this.state.count}</div> // 此处提示类型“Readonly<{}>”上不存在属性“count”
Hooks详解（一）
weixin_45615650的博客
04-06 2154
在React中，创建组件的方式有两种：类式组件和函数式组件。对于刚刚学习react的我（小白）类式组件还是比较容易理解和学习，因为在之前有Vue的学习基础，React的类式组件和Vue的组件可以对比着进行学习，相对来说还是比较容易的。没有学习过类式组件的可以自行进行学习，在这里就不过多说明。本文章是本人在学习React Hooks所总结的，其中为了方便理解不乏一些大白话，望理解！ 下面就开始Hooks的相关介绍吧！ 对比类式组件来说函数式组件中没有状态和生命周期，这就是hooks所产生的原因，可以让函数式组
React hooks
amuist_ting的博客
04-29 673
hoos规则： hooks通常放在组件顶部 hooks不能写在if语句里面 1.useState(initState) 用于为函数组件引入状态state 可接受状态的初始值作为参数 返回一个数组，数组的第一个成员是一个变量，指向状态的当前值；数组的第二个成员是一个函数，用来更新状态； 注意点： setState() 不一定是同步的，为了提升性能，React会批量执行state更新和DOM渲染 setState() 并不会立即改变state，而是创建一个即将处理的state 不要依赖s
常用的hooks入门
小白目的博客
03-20 1922
引言： Hook 这个单词的意思是"钩子"。React Hooks 是加强版函数组件，提倡组件尽量写成纯函数，如果需要外部功能和副作用，就用钩子把外部代码"钩"进来。React 官方默认提供了一些常用钩子，当然也可以按照需要封装自己的钩子进行使用。 官方钩子： 1. useState()：用于为函数组件引入状态（state）。因为纯函数不能有状态，所以把状态放在钩子里。 ......
react尚硅谷笔记
最新发布
09-12
对不起，我没有访问互联网的权限，无法提供尚硅谷关于React的笔记。但是，React是一个流行的JavaScript库，用于构建用户界面。它提供了组件化的开发方式，可以将整个界面拆分成多个独立且可重用的组件。React还使用...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值