# react

**Repository Path**: pleaseanswer/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-06-30
- **Last Updated**: 2024-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: react18配套

## README

## react

> react 是一个视图层框架，而 vue 是一个完整的 MVVM 框架

### 依赖

  * react
  * react-dom

### 节点渲染与创建

* react 渲染
  * `ReactDOM.render(VNode, target)`

* 创建节点（VNode）
  * `React.createElement(type[, props, children])`

* 热更新（自动刷新浏览器）
  * 原理：websocket

### jsx

> 实现在js文件中编写html

> Q：JSX如何分辨js、html代码？

* 编译规则
  * 尖括号内以 html 代码规则编译
  * 花括号内以 js 代码规则编译

#### jsx 写法

* 关键字不能直接使用
  * class -> className
  * for -> htmlFor
  * ...

* 多个单词的属性必须使用驼峰形式
  * autofocus -> autoFocus
  * onkeyup -> onKeyUp
  * ...

* 必须闭合标签

* `{}` 只能使用 js 表达式

### 组件

* 规范
  * 组件必须以首字母大写开头
  * 只能有唯一的顶级标签

#### 分类

* 函数组件（无状态组件、受控组件、UI组件）
  > 纯展示组件
  * 利用函数来定义一个组件，函数必须有返回值
  * 在实际开发过程中尽量使用函数组件，性能更好（因为没有实例化过程）

  ```js
    function TodoList() {
      return (
        <div>TodoList</div>
      )
    }
  ```

* 类组件（状态组件、非受控组件，容器组件）
  > 类继承组件有更丰富的特性（state状态、生命周期等）
  * 利用class类创建的组件，继承自React.Component
  * 在类组件中可以使用this、生命周期等特性
  * 只有在render、constructor、生命周期函数中才有this指向，其他自定义的方法默认没有this指向
  * 修改状态：重写一份数据并覆盖原来的数据
    > `this.setState()`
  * 改变函数this指向
    * `fn.bind` 改变函数fn的this指向，并返回一个新的函数，多次调用只在第一次生效

  ```js
  class TodoForm extendens React.Component {
    constructor(props) {
      // 使得 this.props 在其他自定义方法中也可以使用，否则只有render函数内可以使用
      super(props); 
      this.state = {
        keyword: ''
      }
    }
    render() {
      return (
        <div>
          <input
            type="text"
            value={this.state.keyword}
            onChange={this.changeKeyWord}
            ref={ ele => this.keyword = ele }
          />
          <button onClick={this.add}>添加</button>
        </div>
      )
    }
  }
  ```
  
#### 组件通讯

##### 父 -> 子：props

1. 父组件设置子组件的属性，并传递数据
2. 子组件通过props使用
  * 函数组件：组件的第一个参数
  * 类组件：this.props

```js
// index.js
render() {
  return (
    <div>
      <TodoForm addItem={this.addItem} />
      <TodoContent
        datalist={this.state.datalist}
        completeItem={this.completeItem}
        deleteItem={this.deleteItem}
      />
    </div>
  )
}
```

```js
// TodoContent.js
function TodoContent({ datalist, completeItem, deleteItem, selectItem }) {}
```

```js
// TodoForm.js
add() {
  this.props.addItem(this.state.keyword);
  this.setState({
    keyword: ''
  });
  this.keyword.focus();
}
```

##### 子 -> 父

> 利用props传递方法到子组件执行

##### 深层次组件通讯

* 逐层传递

* context

  > 某个组件往自己的context里面放了些状态，其子组件都可以直接访问这些状态

  1. 定义Context：`let MyContext = React.createContext()`

  2. 父组件往 context 中写入共享数据：`<MyContext.Provider value={data}></MyContext.Provider>`

  3. 子组件使用 context

    * 类组件（contextType-仅类组件可用）

      ```js
      SubComponent.contextType = MyContext
      this.context
      ```
    
    * 函数组件（Consumer-通用）

      ```js
      <MyContext.Consumer>
      {
        context => { /* context中包含所有共享的数据 */ }
      }
      </MyContext.Consumer>
      ```

### 列表渲染

> 在JSX中不能直接渲染对象，但可以渲染数组，一般列表渲染都是用 map 方法

### 事件处理

* this指向的改变

  * bind
    * 初始化时
    * 绑定事件时

  * 箭头函数
    * 定义时
    * 绑定事件时

* event对象的获取
  * 默认事件处理函数的最后一个参数

* 传参
  * bind

* 获取真实DOM节点

  * ref
    * 回调函数 `ref={el=>this.el=el}`

### 生命周期（类组件）

> 组件从创建到销毁的过程

* 阶段

  * 初始化阶段
    * `constructor`

  * 挂载阶段
    * `componentDidMount`
      > ajax
  
  * 更新阶段
    * `componentDidUpdate`
      > 慎重修改 state，避免死循环 

  * 销毁阶段
    * `componentWillUnmount`
  
  * 特殊生命周期
    * `shouldComponentUpdate`
      * 性能优化

* 什么情况下会刷新组件

  * state改变
  * props改变
  * 强制刷新：`this.forceUpdate()`

* 怎么阻止父组件的更新导致子组件也更新？

	* shouldComponentUpdate

  > 条件生命周期，默认返回值为true --> true则渲染
  > 一般用作性能优化（不跑render则优化性能）

* tip: 慎重在 `componentDidUpdate`、`shouldComponentUpdate` 里面使用`this.setState`，会导致死循环

* 把 `this.setState` 放入条件判断语句

```js
//节省开销，提高系统的性能
shouldComponentUpdate(nextProps,nextState) {
  console.log('shouldComponentUpdate', nextProps, nextState);
  console.log(nextProps.age, this.props.age);
  if(nextProps.age === this.props.age) {
    return false;
  }
  return true;
}
```

### Webpack

#### 工作原理

* 从入口开始，逐层分析项目下的所有模块与依赖（包含第三方模块、图片、css等等），进项编译处理，并把它们打包成一个或多个文件

#### 手动搭建 react 环境

* react & react-dom

* babel-loader & @babel/core & @babel/preset-react

* webpack & webpack-cli & webpack-dev-server

  * 项目构建工具
  * 配置文件：`webpack.config.js`
    > commonJS 规范
    * entry 入口
    * output 出口
    * loader 加载器（module.rules）
      * babel-loader
    * plugin 插件
      * html-webpack-plugin
    * devServer 测试服务器
    * mode
      * production
      * development

## react-router

### 内置组件
  
* 路由类型
  * `<HashRouter />`
  * `<BrowserRouter />`

* 路由展示
  * `<Route />`

    * path
    * component
    * exact
    * render
  
  * `<Redirect />`

    * from
    * to
    * exact

* 路由匹配
  * `<Switch />` 匹配单个路由

### 导航

* 声明式导航

  * `<Link />`

  * `<NavLink />`

    * to
    * replace
    * activeStyle
    * activeClassName

* 编程式导航
  > 利用 js 实现页面跳转

  * 跳转方式

    * history 跳转
      * `history.push()`
      * `history.replace()`
    
    * location
    * match

  * 获取 history 对象
    * 通过 `<Route>` 渲染组件，history 会自动写入 props
    * 通过 `withRouter` 高阶组件，history 会自动写入 props

### 高阶组件 HOC

* 高阶组件是一个纯函数，它返回一个组件

* 注意事项
  * 必须返回一个组件
  * 必须给被包装的组件传递 props