# React

**Repository Path**: SeteVII/react

## Basic Information

- **Project Name**: React
- **Description**: react框架的学习和使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-01-05
- **Last Updated**: 2023-10-11

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# react版本问题

<18 

```javascript
// 引入react核心库
import React from 'react';
// 引入ReactDOM
import ReactDom from 'react-dom' 
//引入App组件
import App from './App';

ReactDom.render(
  <App/>,document.getElementById('root')
)
```

18+

```javascript
// 引入react核心库
import React from 'react';
// 引入ReactDOM
import ReactDOM from 'react-dom/client'; 
//引入App组件
import App from './App';

//渲染App组件到页面
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  // React.StrictMode检查App及App子组件内容是否合理
  <React.StrictMode>
  <App />
  </React.StrictMode>
);
```



# React.StrictMode

React.StrictMode检查App及App子组件内容是否合理

```javascript
// 引入react核心库
import React from "react";
// 引入ReactDOM
import ReactDOM from "react-dom";
//引入App组件
import App from "./App";

// 渲染App组件到页面
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  // React.StrictMode检查App及App子组件内容是否合理
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
```



# react组件三大属性

## state

```javascript
1. 组件被称为"状态机", 页面的显示是根据组件的state属性的数据来显示
2. 初始化指定:
    constructor() {
      super()
      this.state = {
        stateName1 : stateValue1,
        stateName2 : stateValue2
      }
    }
3. 读取显示: 
    this.state.stateName1
4. 更新状态-->更新界面 : 
    this.setState({stateName1 : newValue})
```

## props

```javascript
所有组件标签的属性的集合对象
给标签指定属性, 保存外部数据(可能是一个function)
在组件内部读取属性: this.props.propertyName
作用: 从目标组件外部向组件内部传递数据
对props中的属性值进行类型限制和必要性限制
	Person.propTypes = {
		name: React.PropTypes.string.isRequired,
		age: React.PropTypes.number.isRequired
	}
扩展属性: 将对象的所有属性通过props传递
    <Person {...person}/>
```

## refs

```javascript
组件内包含ref属性的标签元素的集合对象
给操作目标标签指定ref属性, 打一个标识
在组件内部获得标签对象: this.refs.refName(只是得到了标签元素对象)
作用: 找到组件内部的真实dom元素对象, 进而操作它
```



# 生命周期

```javascript
1. 组件的三个生命周期状态:
	Mount：插入真实 DOM
	Update：被重新渲染
	Unmount：被移出真实 DOM
2. 生命周期流程:
	* 第一次初始化显示: ReactDOM.render(<Xxx/>, containDom)
		constructor()
		componentWillMount() : 将要插入回调
		render() : 用于插入虚拟DOM回调
		componentDidMount() : 已经插入回调
	* 每次更新state: this.setState({})
	    componentWillReceiveProps(): 接收父组件新的属性
	    componentWillUpdate() : 将要更新回调
	    render() : 更新(重新渲染)
	    componentDidUpdate() : 已经更新回调
	* 删除组件: ReactDOM.unmountComponentAtNode(div): 移除组件
		componentWillUnmount() : 组件将要被移除回调
3. 常用的方法
		render(): 必须重写, 返回一个自定义的虚拟DOM
  	constructor(): 初始化状态, 绑定this(可以箭头函数代替)
  	componentDidMount() : 只执行一次, 已经在dom树中, 适合启动/设置一些监听
```