前端---【node.js+react阶段知识点缩略版】

1. Git  『重点』常用命令:

  * git init

  * git add 

  * git commit 

  * git push

  * git pull

  * git clone 

  * .gitignore

  * vscode 操作 Git

2. Bootstrap 了解
3. Less      重点
4. ES6       重点

     * let  const
     * 解构赋值
         * 箭头函数
           * this 值
           * 简写   a => a => a => a
     * rest 参数  
     * 扩展运算符
     * 类
     * Promise  非常重要
5. Node.js 
  * HTTP                    重点
    * 报文结构
    * 『网络』控制台        
  * CommonJS 模块化 
    * 暴露   module.exports  exports.xxx
    * 导入   require('express');
  * npm                     重点
    * npm init   创建 package.json
    * npm i 
      * -S   生产依赖
      * -D   开发依赖
      * -g   全局安装  `npm root -g`  =>  环境变量 Path
    * 自动向上寻找
      * npm i
      * npm run xxx
    * npm r 移除包

6. AJAX                     重点

   * new XMLHttpRequest();

     * xhr.open();

     * xhr.setRequestHeader();

     * xhr.send();

     * xhr.onload    xhr.onreadystatechange

   

     * xhr.status
     * xhr.getAllResponseHeaders();
     * xhr.response

7. 跨域

   1. jsonp
   2. cors
   3. 代理

8. Promise                                    重点

   1. 使用
      1. new Promise
      2. Promise.resolve
      3. Promise.reject()
   2. 实例方法 then    catch
   3. 函数对象的方法  all  race  resolve  reject   
   4. 核心问题
      1. 状态如何修改 ?
      2. 指定多组回调是否都会执行 ?  
      3. 指定回调与修改状态的先后问题 ?
      4. then 方法的返回结果 ?
      5. 链式调用
      6. 异常穿透  值传递

9. async 和 await                        重点

   1. await 必须要放到 async 函数中

   2. async 的返回值是 promise 对象

   3. await 返回值是右侧 promise 对象成功的结果值

   4. await 右侧 promise 失败了, 抛出错误, 使用 try ....catch... 处理

      ```js
      let p = new Promise((resolve, reject) => {
      resolve(123);
      })
      
      async function fn(){
      	try{
      		await p
      		//这个位置相当于 then 方法成功的回调
      	}catch(e){
      		//这个位置相当于 then 方法失败的回调
      	}
      }
      
      ```

10. axios                                                重点

    1. 使用方法  (axios 是一个函数对象)

       1. axios()
       2. axios.get  axios.post   参数
          1. get(url, config)
          2. axios.post(url, data, config)

    2. 配置对象

       1. method      请求方法
       2. url                URL
       3. baseURL   基础 URL
       4. params   设置query参数
       5. headers   请求头
       6. data       请求体
       7. timeout  超时时间
       8. cancelToken 取消设置

    3. 创建实例  

       ```
       axios.create({
       	baseURL: 'http://localhost:3000'
       })
       ```

    4. 拦截器

       ```
       axios.interceptors.request.use(config => {
       	//可以操作 config 配置对象的
       	return config;
       })
       
       axios.interceptors.response.use(response => {
       	//转换数据
       	return response.data.data;
       })
       ```

11. ESModule   

    1. 暴露    `esmodule 的模块暴露的数据永远都是一个对象`
       1. `分别暴露`    export let name = 'xxx';       {name: 'xxx'}
       2. 统一暴露    export {a, b}                          {a: a, b: b}
       3. `默认暴露`    export default  {}                  {default: {}}
       4. 混合暴露     export  default  {}     export let name = ' xxx';
    2. 导入
       1. `分别导入`   import {a, b} from 'xxx';    
       2. 统一导入  import * as c from 'xxx';
       3. `默认导入`   import d from 'xxx';
       4. import xxx, {name} from 'xxx';

12. webpack

    webpack 的作用:` 打包编写好的源代码, 生成最终可以在浏览器高效 运行的静态资源`

    1. 核心概念

       1. 入口 entry
       2. 出口 output
       3. 加载器  loader
       4. 插件   plugin
       5. 模式   mode

    2. 配置文件打包  webpack.config.js

    3. 配置文件更改位置

       ```sh
       npx webpack --config=./config/webpack.dev.js      # 打包生成最终的静态资源的
       npx webpack-dev-server --config=./config/webpack.dev.js   # 进行项目开发的
       
       npm run build    底层就是在运行 npx webpack
       npm start  就是在运行 webpack-dev-server
       ```

    4. loader 的配置

       ```
       module.exports = {
       	module: {
       		rules: [
       			{
       				test: /\.css$/,
       				use: ['style-loader', 'css-loader']
       			}
       		]
       	}
       }
       ```

    5. plugins  

       ```js
       let htmlWebpackPlugin = require('html-webpack-plugin');
       
       module.exports = {
       	plugins: [
       		new htmlWebpackPlugin({
       			template: './public/index.html'
       			filename: 'index.html',
       			//模块
       			chunks: []
       		})
       	]
       }
       
       ```

    6. babel                                     ES 新特性的语法转为 ES5 的语法

    7. @babel/polyfill                     window.Promise = Promise;

    8. eslint    

13. react   构建用户界面的 JavaScript 库

    特点:

    1. 声明式编码
    2. 组件化
    3. JSX 
    4. diff
    5. 生态  

    初体验:

    	* React.createElement   创建虚拟 DOM 对象

    JSX 

    * 本质就是 React.createElement 的语法糖, 编写更为方便

    表达式

    * {}  中间可以编写 JS 的表达式
      * 表达式
        * 变量
        * 对象属性
        * 字面量值
        * 函数调用
    * 哪些类型的值可以被渲染
      * string
      * number
      * 虚拟 DOM 对象
      * Array<string>  Array<number>  Array<虚拟DOM对象>

    条件渲染

    * if....else
    * &&
    * ? .. :

    列表渲染

    * map =>  ['xx','bb']

    组件

    * 类式组件
    * 函数式组件

14. 脚手架

    1. 样式处理  

    2. 样式模块化   app.module.css   了解

    3. 类式组件

       1. state 类式组件实例对象的属性, 特点: 更新 state 值之后, render 方法会自动执行,重新渲染组件`数据驱动视图`

          ```
          class A extends React.Component{
          	state = {}
          	constructor(){
          		this.state = {}
          	}
          }
          
          setState({})
          ```

       2. props 作用: 实现组件的解耦与复用. 

          ```
          this.props
          ```

       3. ref

       4. 生命周期

          1. componentDidMount
          2. componentWillUnmount
          3. componentDidUpdate

    4. 函数式组件

       1. useState
       2. useEffect
       3. useRef
       4. props

    5. todoList

    6. axios

    7. 组件通信方式

       1. props
       2. pubsub
       3. context
       4. redux

    8. 路由 SPA 的时候想到路由

       ```
       npm i react-router-dom
       
       <BrowserRouter>
       	<Routes>
       		<Route path="/home" element={<Home />} />
       	</Routes>
       </BrowserRouter>
       
       ```

       ```
       let v = <Home />
       let v = React.createElement(Home);
       ```

       * HashRouter     hash 的模式实现切换
       * useRoutes       封装路由, 使用数组形式进行路由配置
       * useParams      获取 params 参数
       * useSearchParams   获取 query 参数  
       * useLocation    获取 state 参数
       * useNavigate    获取 navigate 函数实现跳转
       * 路由的原理   <BrowserRouter>  <HashRouter> 
         * hashRouter         hashchange
         * browserRouter   history.pushState   window.addEventListener('popstate', () => {})

    9. redux

       * 旧版

         ```
         let store = createStore(reducer, state);
         //更新状态
         store.dispatch()
         //获取状态
         store.getState()
         ```

       * 新版

         ```
         let store = configureStore({
         	reducer: slice.reducer
         });
         
         let slice = createSlice({
         	name: 'xx',
         	initialState: {value: 1},
         	reducers: {
         		//immer 库
         		incre: (state, action) => {
         			state.value += action.payload
         		}
         	}
         })
         ```

       * react-redux

         ```
         import {Provider} from 'react-redux'
         
         return <Provider store={store}><App /></Provider>
         ```

         ```
         useDispatch
         
         useSelector
         ```

    10. typescript

        ts 本身就是一门编程语言.

        作用: 

        1. 代码提示    在vscode 中编写代码时, 会提示有哪些属性和方法
        2. 错误提醒   代码在执行之前就会提示错误