# react 笔记

**Repository Path**: Webfrontendtechnology/react_notes

## 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**: 2020-02-27
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



## 创建React项目
npx create-react-app
cd react-demo
npm start


## 环境介绍
node_modules:非常大
public：入口文件
src：源码文件

## React基础知识
### JSX语法介绍
JSX语法：JavaScript + XML语法(HTML)
解读jsx语法：遇到<>按照HTML语法解析，遇到{}按照JavaScript

### 元素渲染

### 组件
组件的后缀可以是js，也可以是jsx
一个React项目，是由成千上万个组件组成

### porps属性
组件的复用性很重要

### 事件处理
1. this问题
2. 向事件处理程序传递参数

### State

### React生命周期函数
随着我们对React理解和使用越来越多，生命周期的参考价值越来越高
函数列表:
    componentWillMount:在组件渲染之前执行<br>
    componentDidMount:在组件渲染之后执行<br>
    shouldComponentUpdate:返回true和false，true代表允<br>许改变，false代表不允许改变<br>
    componentWillUpdate:数据在改变之前执行(state,props)<br>
    componentDidUpdate:数据修改完成(state,props)<br>
    componentWillReveiceProps:props发生改变执行<br>
    componentWillUnmount:组件卸载前执行<br>
子传父!!!
父传子!!!

### setState更新是同步还是异步
1.setState会引起视图的重绘<br>
2.在可控的情况下是异步，在非可控的情况下是同步<br>


### 条件渲染

### 列表 & Key
主要问题是key

### 表单
1. 受控组件
2. 非受控组件

### Refs and the DOM
1.管理焦点，文本选择或媒体播放
2.触发强制动画
3.集成第三方 DOM 库

### 状态提升
组件之间的数据交互

### 组合 vs 继承
this.props.children

### 使用 PropTypes 进行类型检查
增强程序的健壮性



## Redux:
  ###  参考地址：
        http://cn.redux.js.org/index.html
        http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html
   ### 基础知识点：
        React中，状态数据，state
        组件与组件之间可以传递数据：props、回传事件
        兄弟之间组件传递数据：共同的子元素或者共同的父元素（大量的组件需要视同同一条数据）
    如果你不知道什么时候需要使用Redux，就是你不需要使用它，当你遇到解决不了的问题，自然回想起Redux

   ### redux和react-redux的区别
        redux：js的状态管理 createStore
        react-redux：为了在react中容易的使用：connect provider
 ###   1.安装
        npm install --save-dev redux
        npm install --save-dev react-redux

  ###  2.调试流程
        1.chorme浏览器需要安装插件：Redux DevTools
        2.安装依赖
            npm install --save-dev redux-devtools-extension
        3.http://localhost:3000/redux/reduxThunk01 按照这个页面
           

测试