React学习汇总

（一）JSX

1.1 基本语法

使用成对的标签构成一个树状结构的数据。

1.2 标签类型

1. DOM类型的标签（并非真正的dom标签，只是写法一致）

   const imgEle = <img /> // 标签首字母必须小写

2. React组件类型的标签

   const reactEle = <LikeStar /> // 标签首字母必须大写

1.3 JSX中的JS表达式

1. 通过表达式给标签属性赋值

   const ele = <MyComponent foo={1 + 2} />

2. 通过表达式定义子组件

   const nameList = ['a', 'b', 'c'];
   const nameEle = (
   	<ul>
       	{nameList.map(name) => <NameItem key={name} text={name} />}
       </ul>
   );

3. 多行js语句

   jsx的{}中不支持多行js语句。通常将多行js封装成函数，在{}中调用。

1.4 标签属性

1. DOM标签属性
2. 自定义标签属性

1.5 注释

使用花括号{}将/**/包裹起来

const element = (
	<div>
    	{/* 这是注释 */}
        <span>React</span>
    </div>
)

1.6 小结

1. 并非必须，是React.createElement的语法糖
2. 是React开发的首选

（二）元素

2.1 元素渲染为DOM

使用react-com

2.2 元素更新

元素代表某个时刻的状态。对于React来说，每次都会创建新的元素（img），但实际只更新变更部分(src)

（三）组件

独立的、可复用的模块。由这些组件组成应用的UI。

1. 类组件（class）
2. 函数组件

3.1 类组件

要素

1. 关键字class
2. 继承基类React.Compoent
3. render方法return元素

3.2 函数组件

1. 关键字function，建议首字母大写
2. 入参props
3. return元素

3.3 组件的props

1. 属性校验 prop-types库

   3.4 组件的state

2. constructor阶段被初始化

3. state的值不能直接修改，需使用setState(stateChange[, callback])(浅层合并)

   a.浅层合并eg:

   // 初始化阶段
   this.state = {
      isLiked: false,
      isChicked: false,
   }
   // 更新阶段
   this.setState({
      isLiked: true
   })

   结果

   {
      isLiked: true,
      isClicked: false,
   }

   教程里说是类似扩展运算符的做法(抽空看看源码实现)

   {
      previousState,
      ...newState,
   }

   b.回调函数

   可直接从this中获取更新后的state值

   setState({ isLiked: true }, () => {
      // 获取到更新以后的state值
      this.state
   })

3.5 有状态组件和无状态组件

区别：组件是否有state
无状态组件：推荐function形式编写

3.6 组件样式

1. className

   <div className='comment-like-wrapper'>
      <LikeStar className='like-star' />
      <!--多个className-->
      <div className={`like-count ${className}`}>{likeCount}</div> 
   </div>

2. CSS-in-JS
   短线连接->驼峰

   background-color -> backgroundColor

   3.7 组件和元素

   联系: 组件最核心的作用是返回React元素。

   <Parent>
      <Children>自组件</Children>
   </Parent>

   例子：

   import Children from 'Children';
   class Parent extends React.Component {
      render() {
         const { tip } = this.props;
         return <Children tip={tip} />
      }
   }

   （四）组件生命周期

• 挂载时
• 更新时
• 卸载时

4.1 constructor

ES6 class的构造方法

应用场景：

1. state初始化
2. 进行方法绑定

注意：

1. 不要调用this.setState
2. super()的执行，在派生类中使用this必须在执行super()之后

   constructor(props) {
      super(props);
      this.state = { counter: 0 };  
      this.handleClick = this.handleClick.bind(this);
   } 

   4.2 getDerivedStateFromProps

   少用，通常有替代方案。

特点

1. 每次渲染前都会被调用
2. 静态方法，无法使用this
   目的：使组件在props变化时更新state。

props的更新 -> state <- this.setState

// getDerivedStateFromProps函数以追加的方式更新
{
   ...this.state,
   ...obj,
}

4.3 render

描述界面UI效果。render应为纯函数。是class类中唯一必须实现的方法。
render方法仅返回UI描述，并不参与最终渲染

1. React元素 <div />, <MyComponent />…
2. 数组或fragments
3. Portals
4. 字符串、数值类型
5. 布尔类型、null 终端界面无渲染

4.4 componentDidMount

在组建挂载后（插入DOM树中）立即调用

使用场景：

1. 依赖于DOM节点的初始化
2. 通过网络请求获取数据 ajax请求 => this.setState

4.5 componentDidUpdate

更新后会被立即调用。

componentDidUpdate(prevProps, prevState, snapshot) => void
应用：对更新后的DOM进行操作。

componentDidUpdate(prevProps) {
    // 典型用法（记得比较props）：
    if(this.props.userID !== prevProps.userID){
        this.fetchData(this.props.userID);
    }
}