深入理解React：JSX、元素、状态管理与组件生命周期-CSDN博客

本文链接：https://blog.csdn.net/qq_36485311/article/details/104679283

这篇React学习笔记详细探讨了JSX的安全特性、表达式和转换，元素的渲染与更新，函数组件的纯与非纯，以及组件的props和state管理。还涵盖了组件的生命周期、事件处理、表单（受控组件）、状态提示、Context、错误边界和Refs转发。此外，介绍了高阶组件这一复用组件逻辑的高级技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

react 笔记

JSX

jsx是一个javasciprt的语法扩展，jsx可以生成React元素，可以更好的藐视ui应该呈现出他应有交互的本质形式。

JSX 可以防止注入攻击

你可以安全的在jsx中插入用户输入内容，例如

const title=response.potentiallyMaliciousInput;
const element=<h1>{title}</h1>

React dom在渲染所有输入内容之前默认会进行转义，确保你的应用中不会注入明确编写的内容

JSX可以嵌入表达式

在JSX中你可以在大括号内放置任何有效的javascipt表达式，例如：

const name='josh'
ReactDom.render(
    element,
    document.getElementById("root")
)

JSX也是一个表达式

在编译后，JSX表大会会被转为普通的javascipt函数调用

function getGreeting(user){
    if(user){
        return <h1>hello,{formatName(user)}！</h1>;
    }
    return <h1>hello,1</h1>
}

JSX 表示对象

Bable 会把jsx转义成一个名为React.createElement()的函数

元素

元素渲染

元素是构成React应用的最小模块,例如

const element=<h1>Hello</h1>

react元素是开销极小的普通对象，react dom会负责更新dom来与react元素保持一致

元素渲染为dom

在一个react元素中想要把它渲染到dom节点只需要他们一起传入ReactDom.render()例如：

const element=<h1>hello,world</h1>;
ReactDom.render(element,document.getElementById('root'))

更新已渲染的元素

React元素是不可变对象。一旦被创建，你无法更改他的子元素或者属性
我们可以用ReactDom.render()来改变例如:

function tick(){
    const element=(
        <div>
        <h1>hello,world!</h1>
        <h2>It is {new Date().toLocaleTimeString()}</h2>
        </div>
    )
    ReactDom.render(element.document.getElementById('root'))
}
setInterval(tick,1000)

函数

纯函数

不会修改入参

非纯函数

会修改入参

组件

从概念上类似于javascript函数。他接受任意的入参，并返回用户描述页面的展示内容的React元素

props

指的是接受任意的入参

props的只读性

组件无论是使用函数生命还是通过class声明都不能修改自身的props

State

正确使用State

不要直接修改state应该用setState()来更新
State的更新是异步的
State的更新会被合并

组件的生命周期

每个组件都包含生命周期方法，你也可以重新这些方法
生命周期谱

挂载

当组件实力创建被插入dom，生命周期调用顺序

constructor() => static getDeriverStateFromProps() => render() => react DOM更新 => componentDidMount()

更新

当组件的props或者state发生变化的时候会触发更新,生命周期调用顺序

staic getDerivedStateFromProps() => shouldComponentUpdate() => render() => getSnapshotBeforeUpdate() => getSnapshotBeforeUpdate()

卸载

当组件从dom中移除时会调用如下方法

componentWillUnmount()

错误处理

当渲染过程，生命周期，或子组件的构造函数中抛出错误时

static getDerivedStateFromError() => componentDidCatch()

事件处理

React元素的事件处理和dom元素很相似，但是有语法上的不同

React事件的命名采用小驼峰式(camelCase),而不是纯小写
使用JSX语法时你需要传入一个函数作为事件处理函数，而不是字符串
不能通过返回false的方式阻止默认，你必须显式的使用preeventDefault

表单

在React里，表单元素的工作方式和其他dom元素有些不同。因为表单元素通常会保持一些内部的state

受控组件

在html中表单元素之类的表单通常组件维护state，并根据用户输入进行更新，而在react中可变状态通常保存在组件的state属性中，并且只能通过setState()来更新,我们把这两者结合起来，使React的state成为"唯一数据源".渲染表单的React组件还控制着用户输入过程中表单发生的操作。呗React以这种方式控制取值的表单输入元素

状态提示

通常多个组件需要反映相同的变化数据，这时我们建议将共享状态提升到最近的父组件中去

Context

Context提供了一个无需为每层组件手动添加props,就能在组件之间进行数据传递的方法,类似于全局数据

错误边界(Error Boundarise)

过去组件内的javascript错误会导致React的内部状态发生破坏，而且在下一次渲染时产生可能无法追踪的错误，为了解决这个问题应用了一个新的概念错误边界。错误边界是一种React组件，这种组件看捕获并打印发生在其子组件树任何位置的javascript错误，同事渲染出备用ui。而不会渲染出那些崩溃了的子组件树.只要在一个class组件中定义了static getDerivedStateFromError()或者componentDidCatch()这个组件就会变成错误边界组件