如何理解JSX和React组件

发布于:2023-01-04 ⋅ 阅读:(259) ⋅ 点赞:(0)

  如何理解JSX和React组件?JSX 实际上是一个 JavaScript 对象,所以在使用 React 和 JSX 时,必须经过编译过程。React 核心机制 virtual DOM,可以在内存中创建的虚拟 DOM 元素。React 利用虚拟 DOM 减少对实际 DOM 的操作以提高性能,虚拟 DOM 也可以通过 JavaScript 创建。

  Reactjs 起源于 Facebook 的内部项目。它是一个用于构建用户界面的 javascript 库。相当于MVC架构中的V层框架。与市场上的其他框架不同,React 将每个组件都视为状态机。组件状态的变化是通过状态来维护的。当组件的状态发生变化时,React 使用虚拟 DOM 技术来增量和高效地更新真实 DOM。

  1),JSX的优势和局限 web前端学习教程icon-default.png?t=M7J4http://www.mobiletrain.org/study/html5/

  1、 将相关代码放在一起,便于维护,这是单个组件所必需的。

  2、render函数是纯函数,它不做渲染,只是返回一些指令,然后通过这些指令,React通过DOM或者虚拟DOM进行操作,所以react返回的结果都是通过React.createElement 产生的结果

  3、jsx中的{}只能是表达式,不能是语句,因为jsx可以通过babel转换成React.createElement的形式渲染,但是React.createElement中的参数只能是表达式公式不能是语句(如for循环、if判断等),jsx中render函数的{}中不能使用push()、reverse()等数组方法,因为render应该是纯函数,而纯函数不应该有副作用。渲染应该是状态或道具。如果使用 push() 和 reverse() 等数组方法,则直接修改 state 或 props 中的数据,而不是生成新数据。

  2),什么时候使用 props,什么时候使用 state?

  在react中,data包括:satae和props,props是从外部组件传递过来的数据,satae是组件的内部状态,一个组件自己的satae可以作为传递给其子组件的props的数据源,一个组件如果要改变自己的状态,只能通过setState来改变自己的状态。一个组件不能通过修改自己的props直接改变自己的更新状态,也不能修改自己的porps,因为修改自己的props会很乱。只要 props 能处理事情,尽量不要使用 state。

  使用parent传递过来的props作为child的状态会导致值引用对象影响的问题,即如果我改变child的状态,parent props也会随之改变

  3),React 组件的生命周期

  React 组件的生命周期分为三个过程:

  mount:从头开始的过程

  update:重新渲染,分为状态改变触发和props触发

  卸载:从有到无

  挂载过程:getDefaultProps getInitialState componentWillMount render componentDidMount:这个函数只能在浏览器端执行,但是在使用React做服务端渲染时,就不能在服务端执行(因为在服务端突出的那个—— side是一个字符串,基本上没有挂载DOM树的参数,所以不会执行),

  状态变化引起的更新过程:

  shouldComponentUpdate 组件WillUpdate 渲染组件DidUpdate

  父组件想要渲染这个组件变化引起的更新过程:

  componentWillReceiveProps shouldComponentUpdate componentWillUpdate 渲染 componentDidUpdate

  如果父组件不需要重新渲染,shouldComponentUpdate会返回false,所以后续的componentWillUpdate、render、componentDidUpdate都不会执行。

  无论是挂载过程中的render函数之前的声明周期还是更新过程中,获取到的state或者props都是之前没有变化过的数据。只有在render函数之后才是数据改变后的状态。

  4)、为什么要尝试构建无状态组件

  无状态组件是一个纯函数。尽量使组件成为纯函数形式的无状态组件。因为可以减少一些bug的出现,所以我们应该集中管理一些有状态的组件(也就是它们包含状态),并且让它们的子组件是无状态的组件,这样便于管理和维护,

  5),创建高阶组件(HoC,Higher-Order Component)

  HoC高阶组件使用场景,与高阶组件共享一个通用功能,无需编写相同的功能代码。

  6),组件之间的通信

  父组件以properties的形式向子组件传递参数,子组件通过props接受父组件传递的参数;

  如果子组件要与父组件通信,子组件需要调用父组件传递的方法;

  兄弟组件之间的通信可以使用父组件作为中介来传递数据(父组件中写了两个函数,这两个函数分别传递给两个子组件,然后相互引用)

  任何组件之间的通信都可以通过设置一个全局变量来传递数据。

  如果这个项目比较复杂,当然也可以使用redux来进行组件间的通信。

IT学习教程icon-default.png?t=M7J4http://www.mobiletrain.org/study/

 

本文含有隐藏内容,请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到