React归档

本文最后更新于:2022年2月28日 晚上

React学习汇总

(一)JSX

1.1 基本语法

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

1.2 标签类型

  1. DOM类型的标签(并非真正的dom标签,只是写法一致)

    1
    const imgEle = <img /> // 标签首字母必须小写
  2. React组件类型的标签

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

1.3 JSX中的JS表达式

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

    1
    const ele = <MyComponent foo={1 + 2} />
  2. 通过表达式定义子组件

    1
    2
    3
    4
    5
    6
    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 注释

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

1
2
3
4
5
6
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:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    // 初始化阶段
    this.state = {
    isLiked: false,
    isChicked: false,
    }
    // 更新阶段
    this.setState({
    isLiked: true
    })

    结果

    1
    2
    3
    4
    {
    isLiked: true,
    isClicked: false,
    }

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

    1
    2
    3
    4
    {
    previousState,
    ...newState,
    }

    b.回调函数

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

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

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

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

3.6 组件样式

  1. className

    1
    2
    3
    4
    5
    <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元素。

    1
    2
    3
    <Parent>
    <Children>自组件</Children>
    </Parent>

    例子:

    1
    2
    3
    4
    5
    6
    7
    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()之后
    1
    2
    3
    4
    5
    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

1
2
3
4
5
// 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进行操作。

1
2
3
4
5
6
componentDidUpdate(prevProps) {
// 典型用法(记得比较props):
if(this.props.userID !== prevProps.userID){
this.fetchData(this.props.userID);
}
}

本博客所有文章除特别声明外,均采用 CC BY-SA 4.0 协议 ,转载请注明出处!