react-学习

置顶超能力后裔

已于 2023-04-11 22:44:00 修改

阅读量426

点赞数

分类专栏： react 文章标签： react.js 前端

于 2023-04-06 22:37:52 首次发布

本文链接：https://blog.csdn.net/weixin_50402587/article/details/120774928

版权

react 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

搭建React开发环境之前的准备工作。

1、必须安装nodejs      注意：安装nodejs稳定版本


2、安装cnpm用cnpm替代npm

    地址：http://npm.taobao.org/

    安装cnpm:

        npm install -g cnpm --registry=https://registry.npm.taobao.org

3、用yarn替代npm

    

    yarn的安装：

        第一种方法：参考官方文档https://yarn.bootcss.com/


        第二种方法：cnpm install -g yarn  或者 npm install -g yarn

搭建React开发环境的第一种方法（老-现在推荐）：

https://reactjs.org/docs/create-a-new-react-app.html

1、必须要安装nodejs     注意：安装nodejs稳定版本      教程中的nodejs版本:v8.11.2            教程中的npm版本:v5.6.0




2.安装脚手架工具   （单文件组件项目生成工具）   只需要安装一次
    

    npm install -g create-react-app   /  cnpm install -g create-react-app

    

3.创建项目   （可能创建多次）


    找到项目要创建的目录：

    create-react-app reactdemo



4.cd  到项目里面    

    cd  reactdemo


    npm start             yarn start运行项目


    npm run build         yarn build 生成项目

搭建React的开发环境的第二种方法（新-未来推荐）：

https://reactjs.org/docs/create-a-new-react-app.html

1、必须要安装nodejs     注意：安装nodejs稳定版本      教程中的nodejs版本:v8.11.2            教程中的npm版本:v5.6.0




2.安装脚手架工具并创建项目


    找到项目要创建的目录执行：
    

    npx create-react-app reactdemo
    

4.cd  到项目里面    

    cd  reactdemo


    npm start  运行项目（调试）


    npm run build 生成项目（发布）

npx介绍：

npm v5.2.0引入的一条命令（npx），引入这个命令的目的是为了提升开发者使用包内提供的命令行工具的体验。

详情：
http://www.phonegap100.com/thread-4910-1-1.html

npx create-react-app reactdemo这条命令会临时安装 create-react-app 包，命令完成后create-react-app 会删掉，不会出现在 global 中。下次再执行，还是会重新临时安装。
npx 会帮你执行依赖包里的二进制文件。



再比如 npx http-server 可以一句话帮你开启一个静态服务器

manifest.json 文件简介：
允许将站点添加至主屏幕，是 PWA 提供的一项重要功能，当前 manifest.json 的标准仍属于草案阶段，Chrome 和 Firefox 已经实现了这个功能，微软正努力在 Edge 浏览器上实现，Apple 目前仍在考虑中

super关键字：

参考：http://www.phonegap100.com/thread-4911-1-1.html


Es6中的super可以用在类的继承中，super关键字，它指代父类的实例（即父类的this对象）。子类必须在
constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，
而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。



class Person {
     constructor (name) {
            this.name = name;
      }
}

class Student extends Person {
      constructor (name, age) {
            super(); // 用在构造函数中，必须在使用this之前调用
            this.age = age;
     }
}

为什么官方的列子里面写个super(props)：

只有一个理由需要传递props作为super()的参数，那就是你需要在构造函数内使用this.props

那官方提供学习的例子中都是写成super(props)，所以说写成super(props)是完全没问题的，也建议就直接这样写。

react-hook

链接: react-hook.

初始化项目

1.全局安装
cnpm install -g create-react-app
2.创建项目
npx create-react-app my-app

使用 ts语法
1.npx create-react-app my-app --template typescript
2.create-react-app my-app
https://pomb.us/build-your-own-react/

props

元素上级到下级属性传值

this.props.title

子页面–>父页面传参
子
onChange={this.props.handleChildValueChange}
父

handleChildValueChange(event) {
this.setState({age:event.target.value});
};
-----------

super关键字：

Es6中的super可以用在类的继承中，super关键字，它指代父类的实例（即父类的this对象）。子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

class Person {
     constructor (name) {
            this.name = name;
      }
}

class Student extends Person {
      constructor (name, age) {
            super(); // 用在构造函数中，必须在使用this之前调用
            this.age = age;
     }
}

state

setState 异步更新,同步执行

setState 是异步还是同步? 异步更新,同步执行

执行2次 只加一
this.setState({count:this.state.count+1},()=>{
   console.log(count,this.state.count)
})
this.setState({count:this.state.count+1})

执行2次 每次加2
this.setState(
(preState,preProps)=>
return {count:this.state.count+1}
,()=>{
   console.log(count,this.state.count)
})

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

生命周期

第一阶段初始化

构建函数–>getDerivedStateFromProps–>render(): 渲染UI–>componentDidMount
componentDidMount

组件创建好dom元素后,挂载进页面的时候调用;执行一次

第二阶段更新

getDerivedStateFromProps–>shouldComponentUpdate–>render:渲染Ui–>更新–>componentDidUpdate

//componentWillReceiveProps
废弃
//state getDerivedStateFromprops(nextProps,prevState){}
//shouldComponentUpdate(nextProps,nextState){
return nextState.some!==this.state.some;
}
//组件更新后调用
componentDidUpdate(){}

第三阶段销毁

componentWillunmount–>销毁

componentWillunmount(){}

react17的变化

1.事件委托机制改变
2.向原生浏览器靠拢
3.删除事件池
4.useEffect 清理操作改为异步操作
5.jsx不可返回undefined
6.删除部分是由API

package.json

1.主要的命令由它执行
“react-scripts”: “4.0.3”,

2.ts 项目才有
“typescript”: “^4.2.4”,
“web-vitals”: “^1.1.1”

3.“eject”: “react-scripts eject”
// 先提交commit 才能执行npm run eject（eject本身即是弹出）
//会生成配置文件（config文件夹包含webpack.config.js,里面主要使用babel-loader 编译ts|mjs|jsx|js|tsx成js）
//可以更改配置文件依赖自定义编译需要的东西。基本上不使用命令生成项目不需要更改什么。需要更改使用下面第六点插件覆盖更改配置

“devDependencies” 😕/这是开发环境的依赖

tsconfig.json

配置文件链接: link.

在项目配置alias 或者增加其他webpack配置

1.安装react-app-rewired 和 customize-cra

npm install react-app-rewired  customize-cra --D

2.在根目录新建config-overrides.js 文件

// config-overrides.js
const path = require("path");
const { override, fixBabelImports, addWebpackAlias } = require("customize-cra");
const alter_config = () => (config, env) => {
  const oneOf_loc = config.module.rules.findIndex((n) => n.oneOf);
  config.module.rules[oneOf_loc].oneOf = [
    //例如要增加处理less的配置
    // {
    //     test: /\.less$/,
    //     use: [
    //         require.resolve('style-loader'),
    //         {
    //             loader: require.resolve('css-loader'),
    //             options: {
    //                 importLoaders: 1,
    //             },
    //         },
    //         {
    //             loader: 'less-loader'
    //         }
    //     ],
    // },
    ...config.module.rules[oneOf_loc].oneOf,
  ];

  return config;
};

module.exports = override(
  alter_config(), //将自定义配置组合进来
  addWebpackAlias({
    //增加路径别名的处理
    "@": path.resolve("./src"),
  })
  //   fixBabelImports("import", {
  //     //antd UI组件按需加载的处理
  //     libraryName: "antd",
  //     libraryDirectory: "es",
  //     style: "css",
  //   })
);

3.修改package.json启动命令

可以发现，将react-scripts改为react-app-rewired
使用react-app-rewired来执行命令，在config-overrides.js插入配置
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

4.配置别名

根据ts文档，需要baseUrl 和paths配合
但是当我们重启项目，发现tsconfig.json文件会更新，paths 没了
{
  "compilerOptions": {
    "baseUrl": ".",  // This must be specified if "paths" is.
    "paths": {
      "@/*": ["src/*"]   // 此处映射是相对于"baseUrl"
    },
   "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
   ....
  }
}

解决如下
（1）在根目录新建paths.json
//paths.json
 {
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}
（2）在tsconfig.json 中继承合并paths.json
// tsconfig.json
 {
  "extends": "./paths.json",
  "compilerOptions": {
    "target": "es5",
    ......
   }
}

正常使用绝对路径import Robot from "@/components/Robot";

升级普通项目为ts项目

1. 安装
npm i --save typescript @types/node @types/react @types/react-dom @types/jest
node，react， jest 并不是原生支持ts，所以需要typing文件@types/react
如果库原生支持ts就不需要这个，比如ng，vue3
@types/react : react ts 接口定义（也称typing）
2. js文件后缀改为tsx
3. 在app.js 引入 import React from 'react';
4. 运行项目， 会生成tsconfig.json文件

超能力后裔

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-学习

1.全局安装cnpm install -g create-react-app2.创建项目npx create-react-app my-app使用 ts语法npx create-react-app my-app --template typescript
复制链接

扫一扫