📜  反应原生构建 (1)

📅  最后修改于: 2023-12-03 15:07:23.937000             🧑  作者: Mango

反应原生构建

React Native 是一个基于 JavaScript 的应用程序开发框架,可用于构建真实的跨平台移动应用。 React Native 使用原生组件和原生API来实现效率和性能,是一种掌握技能的热门选项。React Native 允许程序员使用 React 的优点,如声明式编程,组件化开发,并且实现了多平台的支持。React Native使用类似HTML的标记语言来构建布局,使用JavaScript绑定到组件上。

构架

React Native 架构涉及两个方面:JS 和原生。JS 包括和任何网站或 Web 应用程序类似的 JavaScript, HTML 和 CSS。与 Web 不同的是,React Native 不使用浏览器作为它的运行环境。相反,它在运行时使用原生组件,这就是它的优势。

React Native提供了一种通过JavaScript访问原生API的方式。这些API是与 React Native一起分发的,并使用Native模块可编写。编写自己的模块是一件简单的事情,我们可以很容易地为我们需要的API编写自定义模块。原生模块可以执行网络请求、访问相机和本地存储等任务,添加了更多的能力。

React Native使用分类的布局方式。每个组件都可以嵌套在其他组件中,并可以通过样式属性支持布局属性。这些布局属性与CSS类似,并被命名为flexbox布局属性。React Native 还支持绝对和相对定位,便于实现稍微复杂的布局。

生命周期

React Native中每个组件都有其生命周期。函数名表明组件在哪个生命周期阶段执行。以下是 React Native 进行组件生命周期管理的方法:

  • 组件将要被挂载:首先执行构造函数。接着组件将在 componentWillMount() 和 componentWillMount() 阶段被挂载。
  • 渲染组件:React Native 运行 render() 函数,用组件的 props 和 state 来创建虚拟 DOM(Virtual DOM)。
  • 组件已装载:React Native 运行 componentDidMount(),该函数只在组件装载完成后调用一次。
  • 组件将要更新:一旦组件接收到新的 props 或 state 更新,React Native 就会执行 componentWillReceiveProps()。
  • 组件状态或属性更新:如果组件收到新的 props 或 state,或者用户与组件交互,例如通过表单或事件处理程序向组件提供输入值,则 React Native 将在 componentDidUpdate() 阶段进行组件更新。
  • 组件将要被卸载:如果我们要将组件从 DOM 中移除,React Native 将在 componentWillUnmount() 阶段执行。
总结

React Native 提供了一种方便的方式来构建跨平台应用程序。React Native 使用类似 HTML 的标记语言构建布局,使用 JavaScript绑定到组件上,使组件被执行和管理。React Native 架构涉及两个方面:JS 和本地。React Native使用原生组件和API来实现效率和性能。React Native 支持多平台,并通过专用布局样式(类似于CSS)提供灵活的布局选项。React Native 中每个组件都有其生命周期,使用生命周期方法来管理组件挂载,更新和卸载。