react笔记

最新推荐文章于 2024-08-17 22:42:26 发布

zhaoyin1994

最新推荐文章于 2024-08-17 22:42:26 发布

阅读量745

点赞数 16

文章标签： react.js 笔记前端

本文链接：https://blog.csdn.net/zhaoyin1994/article/details/141276630

版权

一、项目打包部署：

命令：npm run build

要部署服务器需要通过java或者node搭建一个服务器，前端实现较困难，但是也可以借助一个第三方库express来体验服务器部署。

打包完成后进入build文件夹：

serve 文件名指定启动的文件名。如果默认启动当前文件夹下根目录：serve

前端通常公司中是给后端一个build的包，让后端部署到服务器

二、react扩展

创建一个新项目：creare-react-app react-extension

初始化项目目录文件：

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from './App'

ReactDOM.render(<App/>,document.getElementById('root'))

app.js

import React, { Component } from 'react'

export default class App extends Component {
  render() {
    return (
      <div>
        <h2>我是app</h2>
      </div>
    )
  }
}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
</body>
</html>

扩展1：setState的使用

（1）、setState是异步更新，setState方法是同步执行的，但是更新state状态的动作是异步的，为了提高渲染效率，减少频繁的页面更新，react的更新应该也是有一个缓存异步更新的机制。所以即使调用了更新的方法之后去拿更新的值也是拿不到的。

import React, { Component } from 'react'

export default class index extends Component {
    state={count:0}
    add=()=>{
        // 获取原来的count值
        const {count}=this.state
        // 更新状态
        this.setState({count:count+1})
        // 这里拿到的count并不是修改后的count，而是更新之前的count值，这是因为setState方法
        // 虽然是同步的，但是react操作更新的动作是异步的
        console.log('输出',this.state.count)
    }
  render() {
    return (
      <div>
        <h1>当前求和为：{this.state.count}</h1>
        <button onClick={this.add}>点我+1</button>
      </div>
    )
  }
}

为了解决1中的问题，实际开发中setState方法是可以支持传入第二个参数的，第二个参数默认是一个函数，因此我们可以从函数中拿到更新之后的状态。

  // 更新状态
        this.setState({count:count+1},()=>{
            console.log(this.state.count)
        })

（2）、setState支持两种更新状态的方法：对象式更新和函数式更新

对象式更新：

以上的代码中的更新就是对象式更新，第一个参数采用传入一个对象的方式

函数式更新

（第一个参数是通过一个箭头函数返回一个对象的方式更新状态，第二个参数箭头函数的方式拿到更新后的state.)

        this.setState(
            state=>({count:state.count+1}),
            ()=>{
                console.log(this.state.count)
            })

从上面的两种更新方式获取可以看到，第一种更新的方式是函数式更新的语法糖，写起来代码更简洁，如果项目中不需要通过state,props的值更新状态，则可以直接使用第一种对象式更新，如果需要用到state，或props中的值，则也可以通过函数式更新的方式更新。当然，其实通过对象式更新也可以实现函数式更新要实现的功能。

扩展2：路由懒加载lazyLoad

为什么要用：解决首屏幕加载慢的问题，如果一个入口页面有很多的路由栏目，可以通过路由懒加载，让路由页面在点击的时候再去加载。

这个时候其实还会存在一个问题，就是点击路由的时候如果路由加载慢应该先去展示一个其他的组件。否则会报错

扩展3：hooks

state
useEffect

相当于函数组件中的两个生命周期函数，componentdidMounted和componentdidUpdated,是那个取决于传入的第二个参数，如果传入一个空数据[],那么就相当于mounted,如果什么都不传入，就同时相当于mounted和updated。

函数式组件中如何使用componentWillUnmount组件

扩展3：useRef

函数式组件中使用ref和类组件中不同

扩展4:fragment

空标签也可以实现同样的效果，区别是fragment可以接收key属性，但空标签不能接收任何属性

文档碎片，如果需要使用key遍历，可以使用fragment,如果不需要也可以使用空标签。

扩展5：上下文context

作用：一种组件间通信方式，用于祖组件与后代组件之间跨层级通信

创建上下文context对象

2.接收使用

函数式组件的使用：（consumer也需要引入）

zhaoyin1994

关注

16
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
react笔记

从上面的两种更新方式获取可以看到，第一种更新的方式是函数式更新的语法糖，写起来代码更简洁，如果项目中不需要通过state,props的值更新状态，则可以直接使用第一种对象式更新，如果需要用到state，或props中的值，则也可以通过函数式更新的方式更新。（1）、setState是异步更新，setState方法是同步执行的，但是更新state状态的动作是异步的，为了提高渲染效率，减少频繁的页面更新，react的更新应该也是有一个缓存异步更新的机制。所以即使调用了更新的方法之后去拿更新的值也是拿不到的。
复制链接

扫一扫