从头开始学习React

1.React基础使用

---

刚开始学习，就用简单的 html写，以后会用高阶写法

区别：

1. 虚拟 dom 是一个object 类型的对象，真实 dom 是节点；
2. 虚拟 dom 比较轻，真实 dom 重，debugger 可查；
3. 虚拟 dom 最终会被 react 转化为真实 dom，呈现在页面上；

---

2.JSX语法规则

---

jsx 语法糖规则

        1. 定义虚拟 DOM 时，不要写引号。
        2. 标签中混入 JS 表达式时要用{}。
        3. 样式的类名置顶不要用 class，要用 className。
        4. 内联样式，要用 style{{key:value}}的形式写。
        5. 根标签只能有一个。
        6. 标签必须闭合。
        7. 标签首字母
            （1）.若小写字母开头， 则将该标签转化 html 中的同名元素，若 html 中无该标签对应的同名元素，则报错。
            （2）.若大写字母开头，react 就去渲染对应的组件，若组件没有定义，则报错。

---

3.JSX语法糖遍历

---

---

4.安装 react-tools调试工具

---

下载地址：https://gitee.com/loki-demo/react_dev_tools

---

5.React 定义组件（函数式组件）

---

函数式组件注意

1. 首字母必须大写
2. 函数必须有返回值 return
3. 渲染必须写组件标签，且闭合

渲染ReactDOM.render(…之后，发生了什么？

1. React 解析组件便签，找到 MyCompontent组件。
2. 发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实 DOM,随后呈现在页面中。

---

6.React 定义组件（类式组件）

---

函数式组件注意

1. 首字母必须大写
2. 函数必须有返回值 return
3. 渲染必须写组件标签，且闭合

渲染ReactDOM.render(…之后，发生了什么？

1. React 解析组件便签，找到 MyCompontent组件。
2. 发现组件是使用类定义的，随后 new 出来该类的实例，并通过该实例调用原型上的 render方法。
3. 将 render 返回的虚拟 DOM 转为真实 DOM,随后呈现在页面中。

---

7.React 三大核心属性之一 state 使用

---

标准写法

简写方法

---

8.React 三大核心属性之一 props 使用

---

标准写法

简写写法

注意：
1. 简写方法需要写在类内且需要用 static 修饰；props 只读不能修改；
2. {…person} 可以处理对象也可以处理数组；正常情况下只能处理数组，但是这里{}包裹起来，就可以暴露对象了跟 vue 的很像；
3. propTypes 和 PropTypes 要区分，前者是类的属性，后者是类的属性的类型.string.number.func(方法)；
4. defaultProps 是这是prop 的默认值；
5. constructor类的构造器的作用？
作用：
（1）初始化 state 中数据，为事件处理函数绑定实例即bind 一个this可调用的方法。

如果该构造器只有以上两个作用，完全可以不用，直接写 state 和剪头函数的方法就可以完全取代构造器。是否使用构造器取决于是否要在构造器中能接受 this.props ，如果用构造器，必须 super 和接受

constructor(props){
        super(props)
        console.log(this.props)
    }

---

9.React 三大核心属性之一 refs------不要过度使用 ref

---

字符串类型的 ref ->虽然简单，不建议使用，以后可能被移出，说效率不高！！！

---

回调类型的 ref

注意：

1. ref={ © => { this.inputLeft = c} } 回调方法要用{}括起来；
2. onClick={this.getInfo} 普通方法也要用{}括起来；
3. ref={ © => { this.inputLeft = c} }（复杂写法） ，ref={c => this.inputRight = c} （简写写法）
4. 注释 jsx 语法用{}括起来变成 js，在用/**/括起来就可以实现注释 jsx；

 {/* { this.inputLeft = c} } type="text" />*/}

5. 内联 ref={ © => { this.inputLeft = c} }调用过程中可能会出现渲染调用两次的问题；实例 ref 的写法 ref={this.inputLeftF}
   对应生成一个 inputLeftF = (e)=>{ this.inputLeft = e }就不会出现两次调用 ref 的问题；这个问题不大，怎么写都可以，但是要知道这个问题的实质，如果有人较真，可以跟他操作一波~~

---

createRef的使用

注意：

1. inputLeft = React.createRef() 创建 ref 容器 专人专用
2. 调用
3. this.inputLeft.current.value 获取节点的值

---

10.React 非受控组件与受控组件的区别

---

1. 非受控组件（先用现取）

2. 受控组件（维护到 state 状态中）

3. 高阶函数和柯里化

1. 什么是高阶函数？参数是函数或者返回值是函数满足其一就是高阶函数，
   常用高阶函数：map 、filter、reduce、setTimeout等

2. 什么是函数柯里化？
   自己的理解就是函数里套函数再套函数

---

11.React 生命周期 （非常重要）

---

1. 旧版本

1. 初始化阶段：由ReactDOM.render()触发 ----初次渲染;
   1. constructor()
   2. componentWillMount()
   3. render() ====》必须用
   4. componentDidMount() ====》常用
   1） 注意：一般在这个钩子做一些初始化的事情，开启定时器，发送网络请求，订阅消息等；

2. 更新阶段：由组件内部 this.setState()或父组件 render 触发;
   0. componentWillReceiveProps()=>只有在父组件更新 render 时触发
   1. shouldComponentUpdate() （this.forceUpdate()没有这个）
   2. componentWillUpdate()
   3. render()====》必须用
   4. componentDidMount()

3. 卸载组件：由ReactDOM.unmountComponentAtNode(documnet.getElemengById())触发;
   1. componentWillUnmount() ====》常用
   1） 注意：一般在这个钩子做一些收尾的事情，关闭定时器，取消订阅消息；

旧版图如下图

---

2.新版生命周期

1. 初始化阶段：由ReactDOM.render()触发 ---- 初次渲染;
   1. constructor()
   2. getDerivedStateFromProps()
   3. render() ====》必须用
   4. componentDidMount() ====》常用
   1） 注意：一般在这个钩子做一些初始化的事情，开启定时器，发送网络请求，订阅消息等；

2. 更新阶段：由组件内部 this.setState()或父组件 render 触发;
   0. getDerivedStateFromProps() ----> 挂载完后都执行这个
   1. shouldComponentUpdate()
   2. render()
   3. getSnapshotBeforeUpdate() —> 更新要不要搞个快照（留一下之前数据）
   4. componentDidMount()

3. 卸载组件：由ReactDOM.unmountComponentAtNode(documnet.getElemengById())触发;

4. componentWillUnmount() ====》常用
   1） 注意：一般在这个钩子做一些收尾的事情，关闭定时器，取消订阅消息；

图如下图

注意：新版钩子和旧版钩子的区别

1. 新版废弃了旧版的三个 will 钩子（componentWillMount，componentWillUpdate，componentWillReceiveProps）；
2. 新增了两个方法 (getSnapshotBeforeUpdate , getDerivedStateFromProps)

最常用的重要的钩子

1. render:初始化渲染或更新渲染调用；
2. componentDidMount:开启监听，发送 ajax 请求；
3. componentWillUnmount:做一些收尾工作，如：清理定时器；

---

12.React DOMDE Diffing 算法

---

自己diff总结：

diff 算法就是找不同；按照节点来找的，如果节点里面还有节点那么 diff 会深层比对；

---

13.React 脚手架的使用

---

1. 创建项目并启动

1. 安装脚手架 ：npm i -g create-react-app （window） sudo npm i -g create-react-app（max）
2. 创建项目：create-react-app 项目名称
3. 启动项目：yarn start
4. 打包项目：yarn build
5. 把 wepack.config.js 默认隐藏起来的文件暴露出来；yarn eject

react脚手架创建项目特别注意项

1. %PUBLIC_URL% 代表public 文件路径；
2. 用于开启视口，适配移动端；
3. 用于配置浏览器页签+地址栏的颜色（仅支持安卓手机浏览器，兼容性不太好；）；
4. 描述网站信息；
5. 用于置顶网页添加到手机主屏幕后的图标；
6. 应用加壳配置文件，即H5可转化为Android；
7. 浏览器不支持 js 展示标签中的内容；
8. React.StrictMode严格监控 组件中的写法是否合理；

ReactDOM.render(
  
    
  ,
  document.getElementById('root')
);

9. reportWebVitals 页面 性能分析文件（需要 web-vitals库的支持）；

10. setupTests.js 组件单元测试的文件（需要 jest-dom 库的支持）；

11. css样式模块化：

1).css文件命名为：index.module.css
2).在 jsx 文件中引入hello使用hello.title

import { Component } from "react";
import hello from './index.module.css'

export default class Hello extends Component {
    render() {
        return (
            
我是 Hello 组件
        )
    }
}

12. **快捷生成代码片段 类式和函数式

## rcc  是快捷生成类式代码片段
## rfc  是快捷生成函数式代码片段
**

注意：需要安装插件 才能使用快捷键

13. 引入组件顺序

1>. 第三方方上面 ->react react-dom nanoid uuid
2>. 自己的文件 ->自己定义的组件
3>. 样式文件 ->css 文件

15. 脚手架创建组件

import React, { Component } from 'react'          //  引入第三方文件 
import './index.css'                              // 引入自定义样式
export default class Item extends Component {     // export default 暴露节点
    state = {                                     // 存变量，相当于vue 中的 data
        mouse: false
    }
    mouseEnter = (flag) => {                      // 方法要使用剪头函数
        return () => {
            this.setState({ mouse: flag })
        }
    }
    change = (id) => {                                    // 方法要使用剪头函数 
        return (e) => {                                   // 高阶函数
            this.props.updataTodo(id, e.target.checked)   // 调用父组件传过来的方法并传回去返回值；
        }
    }
	handerDel = (id)=>{
	console.log(id,'id....')
	}
    render() {
        let { item } = this.props                     // 结构赋值获取用的值
        let { mouse } = this.state                    // 结构赋值获取用的值
        return (
            

                 {item.name}
                
{this.handerDel(item.id)}} style={{ display: mouse && item.finish ? 'block' : 'none' }}>Del
 // 不使用高阶函数
            
        )
    }
}

注意：1.如果想在方法中传值，需要使用高阶函数或者不是高阶@click={()=>{this.handerDel(item.id)}} ；2.调用父组件函数传过来的函数 this.props.updataTodo()

14. 生成随机数字 可用于当ID；uuid（大，不推荐）nanoid（小，推荐）

安装 uuid nanoid

npm i uuid          /       yarn add  uuid
npm i nanoid        /       yarn add  nanoid

使用 uuid nanoid

import {nanoid} from 'nanoid';

console.log(nanoid());

15. Proptypes 用于限制传参规格等限制的使用

安装 Proptypes

npm i prop-types          /       yarn add  prop-types

使用 Proptypes

import Proptypes from 'prop-types';


    // 对接受到的参数进行必要性的限制
    static propTypes = {
            name:PropTypes.string.isRequired,
            sex:PropTypes.string,
            age:PropTypes.number,
            speak:PropTypes.func , // 传递函数
    }
    // 对标签默认值设置
    static defaultProps = {
        sex:'保密',
        age:18
    }

16. 函数展开修改默认值的方法

checkAll = () => {
	const {todos}  = this.state
	let newTodos = todos.map(item=>{
	return {...item,finish:true}  // 返回展开的item 并把 item 中的所有 finish 值都替换为 true
	})

}

---

14.React

---

---

15.React

---

---

16.React

---

---

17.React

---

---