【黑叔说】之《React专题知识》(基础篇)

前言：每天一分钟，通勤跟我学！

《React专题知识》系列的知识，来自互联网，由黑叔引用或改编，仅供参考。

一、什么是React？

React是一个简单的javascriptUI库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。

二、keys的作用

Keys是React用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识

在开发过程中，我们需要保证某个元素的key在其同级元素中具有唯一性。在React Diff算法中React会借助元素的Key值来判断该元素是新近创建的还是被移动而来的元素，从而减少不必要的元素重渲染。此外，React还需要借助Key值来判断元素与本地状态的关联关系，因此我们绝不可忽视转换函数中Key的重要性。

三、setState函数的第二个参数

该函数会在setState函数调用完成并且组件开始重渲染的时候被调用，我们可以用该函数来监听渲染是否完成

this.setState(
  { username: 'tjh' },
  () => console.log('setState has finished and the component has re-rendered.')
)

与

this.setState((prevState, props) => {
  return {
    streak: prevState.streak + props.count
  }
})

四、refs的作用

Refs是React提供给我们的安全访问 DOM元素或者某个组件实例的句柄

可以为元素添加ref属性然后在回调函数中接受该元素在DOM树中的句柄，该值会作为回调函数的第一个参数返回

五、什么是JSX？

JSX是javascript的语法扩展。它就像一个拥有javascript全部功能的模板语言。它生成React元素，这些元素将在DOM中呈现。React建议在组件使用JSX。在JSX中，我们结合了javascript和HTML，并生成了可以在DOM中呈现的react元素。示例代码如下：

import React from 'react';
export const Header = () => {
    const show = 'TJH App'
    return(
        <div style={{backgroundColor:'blue'}}>
            <h1>{show}</h1>
        </div>
    )
}

六、组件生命周期方法

componentWillMount()

在渲染前调用,在客户端也在服务端，它只发生一次。

componentDidMount()

在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout,setInterval或者发送AJAX请求等操作(防止异部操作阻塞UI)。

componentWillReceiveProps()

在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

shouldComponentUpdate()

返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。

componentWillUpdate()

在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

componentDidUpdate()

在组件完成更新后立即调用。在初始化时不会被调用。

componentWillUnMount()

组件从DOM中移除的时候立刻被调用。

getDerivedStateFromError()

这个生命周期方法在ErrorBoundary类中使用。实际上，如果使用这个生命周期方法，任何类都会变成ErrorBoundary。这用于在组件树中出现错误时呈现回退UI，而不是在屏幕上显示一些奇怪的错误。

componentDidCatch()

这个生命周期方法在ErrorBoundary类中使用。实际上，如果使用这个生命周期方法，任何类都会变成ErrorBoundary。这用于在组件树中出现错误时记录错误。

七、下期预告：React进阶篇

八、代码人生

我将会持续更新，敬请期待。

回顾历史文章，扫码关注噢！

点击“在看”，点赞自己↓