后端程序员入门react笔记（一）

相关参考

react

首先，我们先大概了解一下什么是react以及react可以干什么。

React 是 Facebook 开源的一个用于构建用户界面的一款 JavaScript 库，主要用于构建 UI。

react的特点

声明式编程
react使用jsx进行渲染，这是一种类似html的语法，可以通过定义属性来描述要呈现的内容。
组件化
react将应用程序分解为组件，每个组件都是一个独立的模块，可以独立的开发和测试，组件可以包含状态、属性、事件处理等程序。并且可以互相通信和交互。
状态管理
react提供了一个状态管理库Redux,用于管理应用程序的装填。Redux将应用程序的状态存储在单个状态树种，并提供了各种操作来修改状态
虚拟dom
react使用虚拟dom来跟踪应用程序状态，而不是实际DOM,这使得react能够快速响应用户输入，并且可以更高效的渲染
社区支持
react拥有庞大的社区支持，有许多可用的插件、库和工具，快速帮助开发人员构建和优化应用程序

基于组件：页面中部分内容

学习一次随处使用

react-native

安装react 创建功能
react 核心库 react-dom dom相关功能渲染功能

常见组件

以下是常见的React组件：

ReactDOM.render()：用于将React组件渲染到DOM中。
ReactDOM.createPortal()：用于创建一个将子组件渲染到指定容器中的React组件。
ReactDOM.Fragment()：用于将多个React元素包装在一个不可展开的元素中。
ReactDOM.StrictMode()：用于启用React的严格模式，使React在渲染过程中更严格地检查组件的依赖关系。
ReactDOM.createContext()：用于创建一个上下文（Context）对象，可以在组件中使用该上下文对象来获取共享的状态和数据。
ReactDOM.useContext()：用于在组件中使用上下文对象来获取共享的状态和数据。
ReactDOM.useState()：用于在组件中定义状态（state）并更新状态。
ReactDOM.useEffect()：用于在组件中定义副作用（side effects）并更新状态。
ReactDOM.useReducer()：用于在组件中定义一个reducer函数，该函数将处理状态更新的逻辑。
ReactDOM.useCallback()：用于在组件中定义一个回调函数，该函数将在组件第一次渲染时被调用，并返回一个缓存的函数，以避免每次渲染时都重新计算。
ReactDOM.useMemo()：用于在组件中定义一个memoized函数，该函数将在第一次调用时计算结果，并在之后的调用中缓存结果，以避免重复计算。
ReactDOM.useDebugValue()：用于在调试时向React堆栈中添加调试信息。
ReactDOM.createRef()：用于创建一个引用（ref），可以在组件中使用该引用来访问其DOM元素或子组件。
ReactDOM.forwardRef()：用于将一个React组件转发给另一个React组件，以使其可以访问父组件的props和refs。
ReactDOM.memo()：用于创建一个memoized函数，该函数将在第一次调用时计算结果，并在之后的调用中缓存结果，以避免重复计算。

箭头函数

在es6之后，出现了一种函数，叫箭头函数，它比普通函数更加简洁方便。我们来举一个简单的例子

js 复制代码

//普通函数
const add=function (a,b){
    return a+b
}

//箭头函数
const addNew=(a,b)=>{
    return a+b
}

箭头函数的特性

那么箭头函数和普通函数相比有哪些特性呢，我们来看看

箭头函数没有this，当访问this的时候，会获取外部的this
箭头函数没有自己的 arguments 对象
箭头函数不能用作构造函数，当使用 new 调用时会出错。它们也没有 prototype 属性。
箭头函数作为表达式的时候，=> 的优先级低于大多数运算符

npm

在了解react之前，我们还需要了解一些基础工具，比如npm，npm 全称是 node package manager,其实就是一个管理js编写的软件包的管理工具，可以下载，安装，升级，上传js软件包。

node.js内置了npm，所以只要安装了node.js，就可以使用npm。node.js的安装非常简单，官方地址下载就可以安装了。安装完毕后，使用npm install npm@latest -g命令将npm升级到最新版本。

npm镜像源配置

为了在国内尽快的下载js库，我们需要配置一下npm的镜像源，即从哪个源下载，这里我指定了华为，其他的还有腾讯，淘宝等镜像源。

npm config set registry https://mirrors.huaweicloud.com/repository/npm/

npm配置解读

我们可以通过npm config list查看npm的相关配置项

$ npm config list
; "builtin" config from /usr/local/lib/node_modules/npm/npmrc
prefix = "/usr/local" 
; "user" config from /Users/zhangguofu/.npmrc
registry = "https://mirrors.huaweicloud.com/repository/npm/"
; node bin location = /usr/local/Cellar/node/21.5.0/bin/node
; node version = v21.5.0
; npm local prefix = /Users/zhangguofu/website/react
; npm version = 10.2.4
; Run `npm config ls -l` to show all defaults.

prefix：指定npm的安装路径。
registry：设置JavaScript库的镜像源。在这个例子中，设置为"https://mirrors.huaweicloud.com/repository/npm/"。
node bin location：指定Node.js二进制文件的位置。
node version：表示已安装的Node.js版本。
npm local prefix：指定npm的本地安装路径。即我下载的js组件的位置
npm version：表示已安装的npm版本。

react的安装

接下来我们就开始讲react的安装

npm安装

我们前面安装了npm，下面我们通过npm来下载react，我执行命令npm i react react-dom，那么在我的npm local prefix路径下，就会生成一个node_modules的目录。注意这里面，react.js可以说是我们的核心文件，用来执行业务逻辑和数据，但是数据完成之后还是要需要渲染成dom才能被用户看到，那么这些数据怎么样才能转换成真正的domn呢，这就用到了react-dom。

hello react
接下来我用一段简单的代码先来演示一下react

html 复制代码

<body>
<div id="root"></div>
</body>
<!--引入react.js-->
<script src="../node_modules/react/umd/react.development.js"></script>
<!--引入react-dom.js-->
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
                    //这个方法需要三个参数 type prop  children
  const title=  React.createElement('div',null,'hello world')
  // 渲染到root里面
    ReactDOM.render(title,document.getElementById("root"));
</script>

脚手架安装

我们知道，脚手架是开发现代web应用的必备，比如webpack babel eslint等工具辅助项目开发，为了让我们更专注的开发业务，减少配置项目，我们使用脚手架来安装和使用react

执行命令npx create-react-app my-app即可创建一个my-app的目录，其中npx是npm5.2版本中的一个命令，create-react-app是脚手架的名字。my-app 就是我们的项目了。

$ ls
README.md node_modules package-lock.json package.json public src
我们进入项目目录并执行npm start即可启动项目，默认是3000端口,接下来我们只需使用三行代码就可以实现一个hello react

js 复制代码

//导入文件
import React from 'react'
import ReactDOM from 'react-dom'
ReactDOM.render(<div>hello react </div>,document.getElementById('root'))

JSX

我们在上面代码可以看到，在js里面我们竟然可以直接写html，而且还不报错，其实这个有趣的标签语法既不是字符串也不是 HTML，而是JSX，它是一个 JavaScript 的语法扩展。我们建议在 React 中配合使用 JSX，JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式。JSX 可能会使人联想到模板语言，但它具有 JavaScript 的全部功能。

那我们可能会很奇怪，为什么js里面的写JSX不会报错呢？其实这就是脚手架的功劳，脚手架已经帮我们下载安装了三个包

@babel/cli
@babel/core
@babel/preset-react
这个babel包负责将JSX编译为react可执行的文本，举个例子const h1 = <h1>this is a H1 Tag</h1>经过编译后会变成const h1 = React.createElement("h1", null, "this is a H1 Tag");，接下来我们看看JSX的功能。

一般使用

js 复制代码

//导入文件
import React from 'react'
import ReactDOM from 'react-dom'
// 注意 dom的属性命名必须是小驼峰  整个jsx推荐用小括号包裹  dom如果没有子节点,可以省略闭合标签
const content=(<div className='content'>hello react <span/> </div>)
ReactDOM.render(content,document.getElementById('root'))

我们来对比一下渲染后的dom

html 复制代码

<div id="root"><div class="content">hello react <span></span> </div></div>

js变量的嵌入

js 复制代码

const myName='张三'
const content=(<div className='content'>{myName}</div>)

三元表达式

js 复制代码

const age=19
const content=(
    <div className='content'>
        <li>是否成年:{age>18?'成年':'未成年'}</li>
    </div>
)

函数表达式

const func=()=>{
    return <div>i am a function</div>
}
const content=<h1>{func()}</h1>

条件和逻辑运算符

js 复制代码

const age=20
const func=()=>{
    //逻辑运算
    return age >18 && <div>i am a function</div>
}

const func2=()=>{
    if (age>18){
        return <div>i am {age}</div>
    }
}
const content=<h1>{func()}{func2()}</h1>

列表渲染

js 复制代码

const heros=[
    {
        name:'batman',
        id:20
    },
    {
        name:'x-police',
        id:21
    },
]
const content=<h1>{heros.map(item=><li key={item.id}>{item.name}</li>)}</h1>

引入css文件

可以通过类名或者行内样式写样式

js 复制代码

import './css/index.css'
const content=<div>
    <h1 style={{color:"red"}}>i am h1</h1>
    <h2 className='tag2'>i am h2</h2>
</div>

react的组件

组件是react的一等公民，你的每一个业务，可能都是多个组件拼装起来的。每个组件可能代表一个功能。组件实现了代码之间的独立性，复用性和耦合性。

组件有两种实现方式，一种是以函数形式实现，一种是以class的形式实现。

函数创建组件

接下来我们看一下函数实现的组件长什么样子,其中我们要注意，函数的名称必须大写，为什么？我们写普通的jsx，可能会有div ul 这些，那么babel如何知道你写的这个是普通的jsx还是组件？就是看第一个字母是否大写，另一方面，组件必须有返回值，也可以返回null

js 复制代码

function GetName() {
    return <div>i am x</div>
}
const content=<GetName/>

箭头函数创建组件
这里遇到一个小插曲，浏览器一直报Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17,这里我们一下改一下rendder的方式

js 复制代码

//导入文件
import React from 'react'
import ReactDOM from 'react-dom/client'
import './css/index.css'
const GetName=()=> {
    return <div>i am x</div>
}
const content=<GetName/>
const root= ReactDOM.createRoot(document.getElementById('root'))
root.render(content)

类创建组件

其实对于一个后端人员来说，class对我们来说实在太熟西了。但是这里需要有两个地方注意，一个是class必须继承自父类React.Component,第二是必须提供render方法，且该方法必须有返回值，我们举例看一下

js 复制代码

class Hello extends React.Component{
    render() {
        return <div>i am class hello</div>
    }
}
const content=<Hello/>

那么我们也看到了，既然可以使用class创建组件，那么我们不可能将很多个class堆在一个js文件中，下面我们看怎么组件抽离

组件抽离

组件抽离其实很简单，就是注意两点，一是js文件中导入react库，第二是导出即可export，我们新建一个hello.js的文件,

js 复制代码

import React  from "react";
class Hello extends React.Component {
    render(){
        return <div>i am hello </div>
    }
}
//导出组件
export default Hello;

文件中引入

js 复制代码

import Hello from './Hello'
const content=<Hello/>

react事件处理

我们知道，在js里面有很多事件

那么react里面是怎么绑定事件的呢？其实和js很像，就是这样的形式on+事件名称={()=>{}}，但是注意一点，事件名称必须是驼峰命名，比如我们绑定一个点击事件

js 复制代码

class Hello extends React.Component {
    Haha(){
        alert("haha");
    }
    render(){
        return <button onClick={this.Haha}>i am hello </button>
    }
}

合成事件

事件可以通过合成事件进行实例传递，比如我们想调用浏览器原生事件，因为原生事件对所有浏览器都是兼容的。那么我们怎么使用这些原生事件呢，我们举个例子

js 复制代码

class Hello extends React.Component {
    Haha(e){
       //禁止跳转
        e.preventDefault();
    }
    render(){
        return <a href='https://www.acurd.com' onClick={this.Haha}>i am hello </a>
    }
}

state

我们前面说过，react是有状态管理的，通过state和setState来配合完成，但是函数组件是没有状态的。而类组件才有状态，为什么？很简单，因为class里面可以定义自己的属性，修改状态是通过this指向。函数明显不能实现这些功能。比如我们现在来定义一个

js 复制代码

class Hello extends React.Component {
    //利用构造函数完成state初始化
    // constructor(props){
    //     super(props);
    //     this.state={
    //         name:'x',
    //         age:18
    //     }
    // }
    //简洁化state初始化
    state={
        name:'x',
        age:18
    }
    render() {
        return (
            <ul>
                <li>name:{this.state.name}</li>
                <li>age:{this.state.age}</li>
            </ul>
        )
    }
}
}

我们怎么让数据动起来呢，这里就用到了setState方法,注意，setState里面是一个对象，想要修改哪个属性就修改哪个属性。

js 复制代码

    render() {
        return (
            <ul>
                <li>name:{this.state.name}</li>
                <li>age:{this.state.age}</li>
                <button onClick={()=>{this.setState({age:this.state.age+1})}}>点我加一岁</button>
            </ul>
        )
    }

那么我们能否把 onClick方法提出来呢，这个当然是可以的，我们前面就做过了，如果我们做一写业务，逻辑处理自然是没有问题，但是如果想要改state，就得先绑定state,我们来看看

js 复制代码

    ChangeAge(){
        this.setState({age:this.state.age+1})
    }
    render() {
        return (
            <ul>
                <li>name:{this.state.name}</li>
                <li>age:{this.state.age}</li>
                <button onClick={this.ChangeAge}>点我加一岁</button>
            </ul>
        )
    }

呃，报错了Uncaught TypeError: Cannot read properties of undefined (reading 'setState')，这个this可不是onClick的this，而是 this.setState的this,为啥函数内部的this是undefined，其实这是babel编译后的结果，babel是在use strict模式下编译的，不允许this指向函数以外的对象，那么this只能指向undefined。

this的指向问题

好了，我们说了函数内部的this是undefined，也解释了原因，那么我们怎么使用到外部的this呢。

利用箭头函数去找外面的this

js 复制代码

    render() {
        return (
            <ul>
                <li>name:{this.state.name}</li>
                <li>age:{this.state.age}</li>
                <button onClick={()=>this.ChangeAge()}>点我加一岁</button>
            </ul>
        )
    }

或者我们直接把函数定义为箭头函数

js 复制代码

    ChangeAge=()=>{
        this.setState({age:this.state.age+1})
    }

第二种方法就是在构造函数中将class的this绑定到函数的this上面

  //利用构造函数完成state初始化
  constructor(props){
      super(props);
      this.state={
          name:'x',
          age:18
      }
      this.ChangeAge=this.ChangeAge.bind(this)
  }

props

props是什么东西？它类似于你在声明对象的时候，给对象添加的属性,它具有以下特性

传递数据，props可以用于向子组件传递数据，这些数据可能是父组件的状态也可能是其他兄弟组件的状态。子组件获取到数据更新自己的状态
外部控制，通过props,父组件可以对子组件进行控制，例如设置初始状态，或者传递回调函数，这种控制方式让react组件之间可以具有更好的互动性和协作性。
属性约束：props是只读的，子组件不能修改父组件传过来的数据。

我们举个例子看一下

js 复制代码

const content=<Hello name='张三' age='18' />

那么我们在使用的使用只需要读取到就行了

js 复制代码

		   <ul>
                <li>name:{this.props.name}</li>
                <li>age:{this.props.age}</li>
            </ul>

或者一次性从props里面取出来

js 复制代码

 render() {
        const {name,age} = this.props
        return (
            <ul>
                <li>name:{name}</li>
                <li>age:{age}</li>
            </ul>
        )
    }

展开运算符的用法

js 复制代码

//展开符
const arr=[1,2,3,4,5,6,7,8,9,10]
const arr2=[11,21,13]
console.log(...arr);
//合并数组
let arr3=[...arr,...arr2]
console.log(arr3);
//展开对象
let obj={
    name:'张三',
    age:18,
    sex:'男'
}
//展开对象需要用花括号表示对象
console.log({...obj});
//给对象添加属性
let obj2={...obj,addr:"xxxx"}
console.log(obj2);

既然对象可以展开，那么我们就可以利用展开符批量添加props

js 复制代码

let p={
    name:'张三1',
    age:'182',
    sex:'男'
}
const content=<Hello {...p} ></Hello>

props限制
我们还可以对props进行限制，比如类型，是否必填等，追忆，这种方式对class 和函数都是适用的

js 复制代码

//对类型进行限制
Hello.propTypes={
    name:PropTypes.string.isRequired,
    sex:PropTypes.string.isRequired,
    age:PropTypes.number.isRequired,
    speak:PropTypes.func.isRequired
}
//初始默认值
Hello.defaultProps={
    name:'张三',
    sex:'男',
    age:18
}

props的简写方式
我们也可以以对象的属性的形式来限制，比如下面这种，写在类的里面，这对我们后端程序员来说就熟悉的多了

js 复制代码

    static propTypes = {
        name:PropTypes.string,
        age:PropTypes.number,
        sex:PropTypes.string
    }
    
    static defaultProps={
        name:'李四',
        sex:'女',
        age:20
    }

函数中怎么使用props

js 复制代码

function Speak(props){
    let {age, name, sex}=props
    return (<div>
        <ul>
            <li>age:{age}</li>
            <li>name:{name}</li>
            <li>sex:{sex}</li>
        </ul>
    </div>)
}
Speak.propTypes={
    age:PropTypes.number,
    name:PropTypes.string,
    sex:PropTypes.string
}

const content=<Speak {...p}  ></Speak>

refs与事件处理

组件内的标签可以通过ref打标识，react就是通过ref识别到对应的元素，来完成对元素的操作。

js 复制代码

class Hello extends React.Component {
    Msg=()=>{
        //input1 就是ref=input1指定的那个dom
        let msg=this.refs.input2.value;
        alert(msg);
    }
    render() {
        return (
            <ul>
                <li><input type="text" ref='input1' placeholder='输入数据'/></li>
                <li><input type="text" ref='input2' placeholder='输入数据'/></li>
                <button onClick={this.Msg} >点击提示数据</button>
            </ul>
        )
    }
}

但是上面的ref的值其实是一个字符串，字符串效率不高，第二方面不方便识别，可能在使用中不小心使用错误。接下来我们看使用回调怎么使用，这种写法相当于通过回调函数给class赋值了一个属性。

js 复制代码

    Msg=()=>{
        alert(this.input1.value)
    }
    render() {
        return (
            <ul>
                <li><input type="text" ref={(dom)=>{this.input1=dom}} placeholder='输入数据'/></li>
                <button onClick={this.Msg} >点击提示数据</button>
            </ul>
        )
    }

当然了，能用箭头函数内嵌的，我们肯定可以提到外面来使用，e就是当前dom对象

js 复制代码

    setInput=(e)=>{
        this.input1=e
    }

但是，这种回调似乎没有字符串写起来方便啊，怎么办？react又做了更新，既然原来你是在直接声明了字符串，容易出问题，那么这样，我先让你声明ref,让后你只需要像使用字符串一样，把你声明的ref赋值给ref就可以了。比如下面

js 复制代码

    input1=React.createRef()
    Msg=()=>{
        alert(this.input1.current.value)
    }

如果发生事件的元素恰好就是我们要操作的元素，我们就可以使用对象e作为参数来处理，比如下面

js 复制代码

class Hello extends React.Component {
    Msg = (e) => {
        alert(e.target.value)
    }

    render() {
        return (
            <li><input onBlur={this.Msg} type="text" ref={this.input1} placeholder='输入数据'/></li>
        )
    }
}

class中的constructor函数的使用场景

通过this.state初始化内部的state
为时间处理函数绑定实例

事件处理

通过on属性指定事件处理函数，合成事件是为了更好的兼容
委托给了最外层的元素，比如div 为了高效
通过event.target活得到dom对象。

收集表单数据

非受控组件
所有输入类的dom ，如果是现用现取，则属于非受控组件。主动获取值
受控组件
由事件去驱动修改状态或者数据，这些就是受控组件

高阶函数

高阶函数：如果函数接收或者返回值有一个是函数类型，那么该函数是高阶函数。
比如这种用户名: <input onChange={this.setData} type="text"/>,其实就是onChange这个事件执行了setData()的这个方法，返回了一个操作指令，所以，如果你传了参数，必须返回一个函数给onChange

js 复制代码

    setData=(dataType)=>{
        return (e)=>{
             this.setState(
                {
                    [dataType]:e.target.value
                }
            )
        }
    }
    getData=(e)=>{
        e.preventDefault()
        let {name,pwd}=this.state
        console.log(name,pwd)
    }
    render() {
        return (
            <form onSubmit={this.getData}>
                用户名: <input onChange={this.setData("name")} type="text"/>
                pwd: <input  onChange={this.setData("pwd")} type="text"/>
                <button>提交</button>
            </form>
        )
    }

函数的柯里化：继续通过调用高阶函数的返回的函数，实现多次接收参数最后统一处理函数的编码方式。其实就是一次调用多个函数，将一组数据通过多个函数的处理而得到结果

js 复制代码

let sum = (a) => {
    return (b) => {
        return (c) => {
            return a + b + c
        }
    }
}
console.log(sum(1)(2)(3));

后端程序员入门react笔记（一）

react

react的特点

常见组件

箭头函数

箭头函数的特性

npm

npm镜像源配置

npm配置解读

react的安装

npm安装

脚手架安装

JSX

一般使用

js变量的嵌入

三元表达式

函数表达式

条件和逻辑运算符

列表渲染

引入css文件

react的组件

函数创建组件

类创建组件

组件抽离

react事件处理

合成事件

state

this的指向问题

props

refs与事件处理

class中的constructor函数的使用场景

事件处理

收集表单数据

高阶函数

相关参考