第九天响应式系统与 React课程笔记 | 青训营

47 阅读4分钟

React的历史和应用

根据查询,React是一个由Facebook开发的JavaScript库,用于构建用户界面。它于2013年首次发布,并且在开源社区中得到广泛应用和支持。React的核心思想是组件化开发,即将用户界面划分为独立且可重用的组件,每个组件负责管理自己的状态和逻辑,并通过组合这些组件来构建复杂的用户界面,这就是React。

React的设计思路和写法

  1. 虚拟DOM:React通过使用虚拟DOM来提高渲染性能。虚拟DOM是一个轻量级的JavaScript对象,它表示真实DOM的映射,并且可以高效地进行比较和更新。通过比较虚拟DOM的差异,它可以最小化真实DOM的操作,从而提高性能。
  2. 单向数据流:React采用了单向数据流的数据管理模式,即数据的流动是单向的,从父组件传递到子组件。这种模式使得应用的数据流变得可预测和可控,方便进行状态管理和调试。
  3. 组件化开发:React将界面划分为独立的组件,每个组件都有自己的状态和生命周期方法。这种组件化开发的方式使得代码更加模块化和可重用,也更容易进行维护和测试

写法:

  1. JSX:JSX是一种类似HTML的语法扩展,用于描述组件的结构和样式。它可以在JavaScript中直接编写HTML,使得组件的结构和逻辑更加清晰和易于理解。
  2. 组件定义:React组件可以通过函数或类的方式定义。函数组件是一种简单的组件定义方式,适用于无状态的展示型组件。类组件是一种更灵活和功能更丰富的组件定义方式,适用于有状态和复杂逻辑的组件。
  3. 状态和属性:组件可以通过状态和属性来管理数据。状态表示组件内部的可变数据,而属性表示组件对外部传入的数据。使用状态和属性可以实现动态数据的展示和交互。

移动原生应用开发

移动原生应用开发主要指的是使用原生代码编写应用程序,在移动设备上直接运行。与使用React编写Web应用不同,移动原生应用开发需要使用特定的开发工具和语言,例如iOS开发需要使用Objective-C或Swift,而Android开发则需要使用Java或Kotlin。优势在于可以完全利用平台的特性和性能,同时也会带来一些挑战,例如需要针对不同平台进行开发和调试,以及需要掌握平台特定的开发知识和技术

React 设计与实现 - 组件化 状态归属问题 生命周期

组件:组件是由界面和逻辑组成的独立单元,可以被组合成更大的组件或者嵌套在其他组件内部。组件化开发使得代码更加模块化和可重用,提高了开发效率和可维护性。在React中,组件可以是函数组件(函数式组件)或类组件。函数组件是一种纯函数,接收props作为参数并返回用于渲染的React元素。类组件则是以类的形式定义的组件,可以使用状态(state)和生命周期方法。

状态归属问题:
在React中,状态是组件内部管理的数据,可以通过state属性来定义和更新。状态归属问题指的是如何选择将状态存储在哪个组件中。通常,我们需要考虑以下几个方面来决定状态的归属:

状态的作用域:确定状态是否需要在多个组件之间共享。如果需要共享,可以将状态提升到共同的父组件中,然后通过props传递给子组件。如果只在组件内部使用,无需提升状态。

组件的复用性:如果某个状态只在单个组件中使用,并且该组件具有高度的复用性,可以将状态放置在组件内部。这样可以确保状态与组件的逻辑紧密耦合,方便其他开发者使用组件时了解其内部状态的变化。 组件的层次结构:根据组件的层次结构和关系,考虑将状态放置在哪个父组件中,以便更好地控制状态的更新和传递。

React组件生命周期指的是组件在不同阶段执行的方法。一些生命周期方法已经被废弃,推荐使用新的异步渲染特性和副作用钩子函数(例如useEffect)来替代,从而更好地管理组件的生命周期。