# react-pro

**Repository Path**: yushi5344/react-pro

## Basic Information

- **Project Name**: react-pro
- **Description**: react组件学习
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2021-08-30
- **Last Updated**: 2021-09-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# ReactPro
## 关于虚拟DOM
1. 本质是object类型对象
2. 虚拟DOM比较轻,真实DOM比较重,因为虚拟dom是react内部在使用,无需真实DOM上那么多的属性.
3. 虚拟dom最终会被react转化为真实dom,呈现在页面上

## jsx语法规则
1. 定义虚拟DOM时,不要用引号
2. 标签中混入js表达式用使用{}
3. 样式的类名不要写class,要写className
4. 内联样式,要用style={{key:value}} 的形式去写
5. 只有一个根标签
6. 标签必须闭合
7. 标签首字符
    - 若首字母小写,则将标签转为HTML中同名元素,若HTML中无该标签对应的同名元素,则报错
    - 若首字母大写,react就去渲染对应组件,如果组件不存在,则报错.


## 函数式组件
执行了`ReactDOM.render(<MyComponent></MyComponent>,...)`发生了什么
- React解析组件标签,找到了MyComponent组件
- 发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后呈现在页面中


## class类
1. 类中构造器不是必须写,要对实例进行一些初始化操作,才需要写.
2. 如果A继承B,且A中有构造器,那么A构造器中必须写super
3. 类中定义的方法,都在类的原型对象上,供类的实例使用.


## 类式组件
 执行了 ReactDOM.render(<MyComponent></MyComponent>,...)发生了什么
 1. React解析组件标签,找到了MyComponents组件
 2. 发现组件是使用类定义的,随后new出来该实例,并通过该实例调用原型对象上的render方法
 3. 将render返回的虚拟DOM转为真实DOM,随后呈现在页面上.


## state
1. state是组件对象最重要的属性,值是对象
2. 组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)
3. 组件中render函数中this为组件实例对象
4. 组件自定义方法中this为undefined,如何解决
   - 强制绑定this  通过bind函数
   - 箭头函数 
   
5. 状态数据,不能直接修改或者更新 

## props
1. props传值两种方式
   - 单独传值
   
       ```javascript
         ReactDOM.render(<Person name="jerry" age={19} sex='男' speak={speak}/>,document.getElementById("test"));
       ```
   - 批量传值
   
      ```javascript
      const p={name:"李蕾",age:29,sex:"女"};
      ReactDOM.render(<Person {...p}/>,document.getElementById("test2"));
      ``` 
     注意:此处{...p},并不是使用扩展运算符对对象进行展开,这是React中的写法.事实上,扩展运算符无法对对象进行展开.

2. 对标签属性进行类型,必要性限制 `propTypes`

    ```javascript

    class Person extends React.Component{
    		
          static propTypes={
             name:PropTypes.string.isRequired,
             sex:PropTypes.string,
             age:PropTypes.number,
             speak:PropTypes.func,
          };
      render(){
        //...
      }
    }
      
    ```

3. 指定默认标签属性值  `defaultProps`

    ```javascript

    class Person extends React.Component{
    		
         static defaultProps={
            sex:"男",
            age:18
         };
      render(){
        //...
      }
    }
      
    ```
4. 构造器是否接收props,是否传递给super,取决于是否希望在构造器中通过this访问props


## 函数式组件使用props

   ```javascript
	function Person(props) {
		const {name,age,sex}=props;
		return (
			<ul>
				<li>姓名:{name}</li>
				<li>性别:{age}</li>
				<li>年龄:{sex}</li>
			</ul>
		)
	}
	// 对标签属性进行类型,必要性限制
	Person.propTypes={
		name:PropTypes.string.isRequired,
		sex:PropTypes.string,
		age:PropTypes.number
	};
	// 指定默认标签属性值
	Person.defaultProps={
		sex:"男",
		age:18
	};
	ReactDOM.render(<Person name="jersey" />,document.getElementById('test'));
   ```
## refs
1. 字符串类型

    ```javascript
      // 虚拟dom
      <input type="text" ref="input2" onBlur={this.showData2} placeholder="失去焦点提示信息"/>
     // 方法
     showData2=()=>{
              const {input2}=this.refs;
              alert(input2.value)
       }
    ```
2. 回调函数类型

     ```javascript
       <input type="text" ref={this.saveInput} placeholder="请输入"/><br/>
       <button onClick={this.showData}>点击提示数据</button><br/>
       
       saveInput=(c)=>{
            this.input1=c;
        }
   
        showData=()=>{
          alert(this.input1.value)
        }
     ```
 
 
3. createApi

   ```javascript
     class Person extends React.Component{
       myRef=React.createRef();
         showData=()=>{
             alert(this.myRef.current.value)
         }
         render(){
             return (
                 <div>
                  <input type="text" ref={this.myRef2}  onBlur={this.showData} placeholder="失去焦点提示信息"/><br/> 
                 </div>
             );
         }
     }
     ReactDOM.render(<Person/> ,document.getElementById("test"));

   ```
4. 使用refs注意事项
   - 通过onXxx属性指定事件处理函数(注意大小写)
     - React使用的是自定义(合成)事件,而不是使用的原生DOM事件-为了更好的兼容性
     - React中的事件时通过事件委托方式处理的(委托给组件最外层的元素)  --为了高效
   - 通过`evnet.target`得到发生事件的DOM元素对象  -- 不要过度使用ref

## 高阶函数和函数柯里化
1. 高阶函数   
  如果一个函数负荷下面两个规范中的任何一个,那么该函数就是高阶函数- 若A函数,接收的参数是一个函数,那么就可以称之为高阶函数
   - 若A函数,调用的返回值已然是一个函数,那么就称为A为高阶函数
   - 常见的告诫函数有: `Promise` `setTimeout`  `arr.map` `arr.filter`
2. 函数的柯里化   
   通过函数调用接续返回函数的方式,实现多次接收参数,最后统一处理的函数编码形式


## React生命周期
1. 组件对象从创建到死亡会经历特定阶段
2. React组件对象包含一系列钩子函数,在特定时期调用
3. 我们定义组件时,在特定的生命周期回调函数中做特定的工作.
4. 生命周期流程图 (旧)
     ![react生命周期](./script_src/assets/images/react生命周期(旧).png)

5. 具体流程(旧)
   - 挂载时,由ReactDOM.render()触发
     - constructor
     - componentWillMount
     - render
     - componentDidMount
   - 更新时 组件内部this.setState或者父组件render触发
     - shouldComponentUpdate
     - componentWillUpdate
     - render
     - componentDidUPdate
   - 卸载组件 由`ReactDOM.unmountComponentAtNode`触发
     -  componentWillUnmount
   - 父组件往子组件传值时,子组件
     - componentWillReceiveProps
     
6. 新版本生命周期
  ![react生命周期](./script_src/assets/images/react生命周期(新).png)
7. 新旧版本钩子函数兼容性
   1. 改名 (即将废弃)
      - `componentWillMount` ==> `UNSAFE_componentWillMount`
      - `componentWillUpdate` ==> `UNSAFE_componentWillUpdate`
      - `componentWillReceiveProps` ==> `UNSAFE_componentWillReceiveProps`
   2. 增加
      - `getDerivedStateFromProps` 从组件获取一个派生的属性
      - `getSnapshotBeforeUpdate`
8. 新版生命周期所有钩子
   - 初始化阶段 由`ReactDOM.render()`触发--初次渲染
     - constructor
     - getDerivedStateFromProps
     - render
     - componentDidMount
   - 更新阶段 由组件内部`this.setState`或者父组件重新render触发
     - getDerviedStateFromProps
     - shouldComponentUpdate
     - render
     - getSnapshotBeforeUpdate
     - componentDidUpdate
   - 卸载 由`ReactDOM.unmountComponentAtNode`触发
     - componentWillUnmount