如何理解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前端学习教程http://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学习教程http://www.mobiletrain.org/study/