泊一的博客

文章目录一、 [Refs & DOM](https://react.docschina.org/docs/refs-and-the-dom.html)1.1 使用场景1.2 创建Ref1.3 将 DOM Refs 暴露给父组件二、[Refs 转发](https://react.docschina.org/docs/forwarding-refs.html)三、[回调 Refs](https://react.docschina.org/docs/refs-and-the-dom.html#callba

文章目录一、 React路由介绍二、 路由的基本使用2.1 使用步骤2.2 常用组件说明2.3 路由的执行过程2.4 编程式导航2.5 默认路由2.6 匹配模式2.6.1 模糊匹配模式2.6.2 精准匹配小结一、 React路由介绍现代的前端应用大多数是SPA（单页应用程序），也就是只有一个HTML页面的应用程序。因为它的用户体验更好、对服务器压力更小，所以更受欢迎。为了有效的使用单个页面...

文章目录一、 `setState()`说明1.1 更新数据1.2 推荐语法1.3 第二个参数二、 JSX语法的转化过程三、 组件更新机制四、 组件性能优化4.1 减轻state4.2 避免不必要的重新渲染五、纯组件5.1 作用以及使用5.2 实现原理六、 虚拟DOM和Diff算法6.1 虚拟DOM6.2 Diff算法6.3 代码演示小结一、 setState()说明1.1 更新数据s...

文章目录一、render-props模式1.1 React组件复用概述1.2 思路分析1.3 使用步骤1.4 children代替render属性1.5 代码优化一、render-props模式1.1 React组件复用概述思考：如果两个组件中的部分功能相似或相同，该如何处理？处理方式：复用相似的功能复用什么？state操作state的方法两种方式：render pr...

文章目录组件生命周期概述组件生命周期概述意义：组件的生命周期有助于理解组件的运行方式，完成更复杂的组件功能、分析组件错误原因等组件的生命周期： 组件从被创建到挂载到页面中运行，再到组件不在时卸载的过程生命周期的每个阶段总是伴随着一些方法调用，这些方法就是生命周期的钩子函数构造函数的作用：为开发人员在不同阶段操作组件提供了时机只有类组件才有生命周期...

文章目录一、 组件通讯介绍二、组件的props2.1 基本使用2.2 特点三、组件通讯的三种方式3.1 父组件传递数据给子组件3.2 子组件传递数据给父组件3.3 兄弟组件传递示例demo一、 组件通讯介绍组件是独立且封闭的单元，默认情况下，只能使用组件自己的数据。在组件化过程中，我们将一个完整的功能拆分成多个组件，以更好的完成整个应用的功能。而在这个过程中，多个组件之间不可避免的要共享某些...

文章目录一、 React组件介绍二、 组件的创建方式2.1 函数创建组件2.2 类组件2.3 抽离成单独的JS文件三、 React事件处理3.1 事件绑定示例小结3.2 事件对象示例四、 有状态组件和无状态组件五、State和SetState5.1 state基本使用示例5.2 setState() 修改状态实例小结5.3 抽取事件处理函数原因六、 事件绑定this指向6.1 箭头函数6.2 利用...

文章目录一、什么是React1.1 特点1.2 React的使用1.3 实例二、 React脚手架2.1 React脚手架意义2.2 使用React脚手架初始化项目2.3 脚手架中使用React三、`JSX`的使用3.1 概述`JSX`产生的原因`JSX`的概述3.2 简单入门使用使用步骤为什么在脚手架中可以使用JSX语法注意点3.3 JSX语法3.3.1 嵌入JS表达式注意点3.3.2 条件渲...