如何理解JSX和React组件?

　　如何理解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的优势和局限

　　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来进行组件间的通信。

　　更多关于“web前端培训”的问题，欢迎咨询千锋教育在线名师。千锋教育多年办学，课程大纲紧跟企业需求，更科学更严谨，每年培养泛IT人才近2万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。