从零构建react开发技术汇总

Posted 2022-12-11 mask哥

npm设置淘宝镜像
sudo npm install -g cnpm --registry=https://registry.npm.taobao.org

npm set registry https://registry.npm.taobao.org

更新npm 版本
sudo cnpm install -g npm@8.1.0

更新node版本
npm install node@17.0.0

构建react开发环境
npm install -g create-react-app

创建react 脚手架： hello-app
create-react-app hello-app

最新版创建脚手架：hello-app

npx create-react-app hello-app

最新版创建脚手架typescript模板：

npx create-react-app my-app-ts --template typescript

babel安装

npm install -g babel-cli --save-dev   将babel设置为环境依赖
npm install --save-dev babel-preset-latest   安装预设[转码规则] 装的是最新版 用来转换es6语法

npm全局安装的组件：
npm install -g eslint

npm install -g typescript

安装 webpack，以全局的方式安装:
 npm install webpack -g

将Webpack安装到项目的依赖中,使用本地版本的webpack:
# 进入项目目录
# 确定已经有 package.json，没有就通过 npm init 创建
# 安装 webpack 依赖
$ npm install webpack --save-dev

react开发工具：react developer tools+vscode+nodejs+npm+chrome

vscode 开发 react常用插件工具：
     1.es7+react
     2.babel-javascript
     3.eslint
     4.Reactjs code snippets
     5.React Redux ES6 Snippets
     6.React-Native/React/Redux snippets for es6/es7
     7.JavaScript (ES6) code snippets(es6代码片段)
     8.Typescript React code snippets(这是tsx的react组件片段)
     9.Beautify css/sass/scss/less
     10.Path Intellisense
     11.npm Intellisense(对package.json内中的依赖包的名称提示)
     12.Beautify
     13.markdownlint
     14.React Native Tools
     15.GitLens
     16.Eclipse Keymap
     17.Prettier Formatter 
     18.auto rename tag—闭合标签同步

react知识点

    1.元素渲染：
        元素用于描述屏幕上输出的内容。 
        const element = <h1>Hello, world!</h1>;
        将元素渲染到 DOM 中，<div id="example"></div>   

        const element = <h1>Hello, world!</h1>;
        ReactDOM.render(
            element,
            document.getElementById('example')
        );

    2.react使用JSX替代常规的js

    3.组件 React.Component

    4.状态：React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM)

    this.state 来修改当前的时间

    数据自顶向下流动

    5.属性： props

    6.事件处理

    7.条件渲染
       React 中的条件渲染和 JavaScript 中的一致，使用 JavaScript 操作符 if 或条件运算符来创建表示当前状态的元素，然后让 React 根据它们来更新 UI。

    8.React 列表 & Keys
      使用 JavaScript 的 map() 方法来创建列表。

    9.React 组件 API：
            设置状态：setState
            替换状态：replaceState
            设置属性：setProps
            替换属性：replaceProps
            强制更新：forceUpdate
            获取DOM节点：findDOMNode
            判断组件挂载状态：isMounted

    10.react组件生命周期

         组件的生命周期可分成三个状态：
            Mounting(挂载)：已插入真实 DOM
            Updating(更新)：正在被重新渲染
            Unmounting(卸载)：已移出真实 DOM

            挂载
            当组件实例被创建并插入 DOM 中时，其生命周期调用顺序如下：

            constructor(): 在 React 组件挂载之前，会调用它的构造函数。
            getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。
            render(): render() 方法是 class 组件中唯一必须实现的方法。
            componentDidMount(): 在组件挂载后（插入 DOM 树中）立即调用。
            render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。
            更新
            每当组件的 state 或 props 发生变化时，组件就会更新。

            当组件的 props 或 state 发生变化时会触发更新。组件更新的生命周期调用顺序如下：

            getDerivedStateFromProps(): 在调用 render 方法之前调用，并且在初始挂载及后续更新时都会被调用。根据 shouldComponentUpdate() 的返回值，判断 React 组件的输出是否受当前 state 或 props 更改的影响。
            shouldComponentUpdate():当 props 或 state 发生变化时，shouldComponentUpdate() 会在渲染执行之前被调用。
            render(): render() 方法是 class 组件中唯一必须实现的方法。
            getSnapshotBeforeUpdate(): 在最近一次渲染输出（提交到 DOM 节点）之前调用。
            componentDidUpdate(): 在更新后会被立即调用。
            render() 方法是 class 组件中唯一必须实现的方法，其他方法可以根据自己的需要来实现。

            卸载
            当组件从 DOM 中移除时会调用如下方法：
            componentWillUnmount(): 在组件卸载及销毁之前直接调用。

    11.react ajax  
       React 组件的数据可以通过 componentDidMount 方法中的 Ajax 来获取，当从服务端获取数据时可以将数据存储在 state 中，再用 this.setState 方法重新渲染 UI。
       当使用异步加载数据时，在组件卸载前使用 componentWillUnmount 来取消未完成的请求。

     12. 表单与事件
       React中，可变的状态通常保存在组件的状态属性中，并且只能用 setState() 方法进行更新。
       当需要从子组件中更新父组件的 state 时，需要在父组件通过创建事件句柄 (handleChange) ，并作为 prop (updateStateProp) 传递到子组件上。

     13.react refs 绑定dom属性

react开发核心技术组件：

 ajax请求：axios
 跨域： 下载 http-proxy-middleware

   npm i http-proxy-middleware --save
   创建 src/setupProxy.js 

 const proxy = require('http-proxy-middleware')

module.exports = function(app) 
// /api 表示代理路径
// target 表示目标服务器的地址
app.use(
proxy('/api', 
// http://localhost:4000/ 地址只是示例，实际地址以项目为准
target: 'http://localhost:4000',
// 跨域时一般都设置该值 为 true
changeOrigin: true,
// 重写接口路由
pathRewrite: 
'^/api': '' // 这样处理后，最终得到的接口路径为： http://localhost:8080/xxx

)
)

react路由 ：npm i --save  react-router-dom
                  npm i --save @types/react-router-dom   //编译器需要通过这个声明文件，进行类型检查工作.

react动画

react redux(状态管理)                                       

1.redux概念：
    提供存放应用程序状态的容器
    把action分发到状态修改器的机制，也就是reducer函数
    监听状态变化的机制
    redux设计理念与Flux一致
2.安装redux

   npm install @reduxjs/toolkit
   npm install --save redux

    npm install --save react-redux   //react 绑定库

    npm install --save-dev redux-devtool   //redux开发者工具

3.三大原则：
     单一数据源
     State是只读的 ：唯一改变state的方法是触发action,action 是一个用于描述已发生事件的普通对象.
     使用纯函数来执行修改：为了描述 action 如何改变 state tree ，需要编写 reducers（纯函数）

4.Redux构成：
    action 把数据从应用传到store的载体
    reducer 指定应用状态如何响应到action并发送到store
    store:关联action和reducer