如何理解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万人。不论你是零基础还是想提升，都可以找到适合的班型，千锋教育随时欢迎你来试听。
