组件化和React

组件化和React

题目：

• 说一下对组件化的理解
• jsx的本质是什么
• jsx和vdom的关系是什么
• 说一下setState的过程
• 阐述自己对react和vue的认识

对组件化的理解：1.封装(视图，数据，变化逻辑)。2.复用(props传递)。

jsx的本质是什么：jsx跟vue模板一样，都是语法糖，是为了降低学习成本和写代码的难度(相比直接写h函数来说)。最终也是编译成js在浏览器中运行的。jsx最终被解析成了React.createElement方法。这个方法也就类似vdom中的h函数，和vue中的_c函数，返回vnode。跟vue2.0之后的预编译一样，jsx编译成js的过程也是在本地完成的，给浏览器的是编译后的js。

// JSX解析
React.createElement(标签名，描述对象，子元素1，子元素2，...);
React.createElement(标签名，描述对象, 子元素数组); 

• 虽然jsx是react引入的，但不是react独有的
• react已经将他作为独立标准开放，其他项目也可以使用
• 了React.createElement是可以自定义修改的，一般改名为h函数(修改方法：/* @jsx h */)
• 本身功能完备，方便与其他标准兼容，扩展性好

jsx和vdom的关系

• vdom是react初次推广开来的，结合jsx
• jsx是模板，最终转换成js，渲染成html
• 初次渲染 + setState之后的re-render
• 正符合vdom的场景。vdom和jsx是分不开的

React中何时patch

// patch的第一种用法
patch(container, vnode) 
ReactDOM.render(<APP/>, container);
// patch的第二种用法
patch(vnode, newVnode);
setState({}) // 在setState中

自定义组件的解析

React.createElement(标签名，描述对象, 子元素数组); 

注意，上边的标签名有两种情况：

1. html标签，此时标签名为字符串，如'p'/'div'
2. 自定义组件的标签，此时直接传入组件名，是个变量，也就是该组件的构造函数(class)

• ‘div’ 直接渲染<div>即可,vdom可以做到
• 而自定义组件名如<APP/>，vdom是不认识的
• 因此自定义组件定义时必须声明render函数
• 根据props初始化实例，然后执行实例的render函数

// 解析自定义组件时
var app = <APP id="root"/>;
// 传入APP构造函数
ReactDOM.render(APP, {id: 'root'})
// 其实就等同于
var a = new APP({id: 'root'});
a.render();
// 一层一层渲染下去

说说react中setState的过程

• setState是异步的
• vue的修改属性也是异步的
• setState的过程

this.state.hehe = 'hehe';
this.setState({
    hehe: 'haha'
});
console.log(this.state.hehe); // hehe  setState是异步的

为何要异步？

• 可能回一次执行多个setState
• 无法得知用户如何使用setState
• 考虑到性能，没必要每次setState都重新渲染
• 即便每次都重新渲染，用户也看不到中间效果
• 所以只要看到最后的结果即可

setState的过程：

• 每个组件实例都有renderComponent方法
• 执行renderComponent会重新执行这个实例的render
• render会返回新的虚拟节点newVnode，上一次的是preVnode
• 执行patch(preVnode, newVnode)

React VS Vue

• 文无第一，技术选型没有绝对的对错
• 技术选型要考虑的因素很多
• 面试者要有自己的主见
• 面试观点不同没事，有理有据即可

两者的本质区别

• vue 本质是MVVM框架，由MVC发展而来
• React 本质是前端组件化框架，由后端组件化发展而来
• 但这并不妨碍两者实现相同的功能

模板的区别

• vue使用模板（最初由angular提出）
• react使用jsx
• 模板语法上来说更倾向于jsx，毕竟已经是标准了
• 模板分离上来说更倾向于vue

模板的区别：jsx相比vue的各种v-自定义属性，学习成本更低更直观，只要知道大括号{}之间放js语句即可。但是jsx会把js逻辑和html模板混在一起写，没有分离解耦

组件化的区别：react本身就是组件化的，vue也支持组件化，但是他是在mvvm上的扩展(vue号称渐进式，html中使用new Vue也可以用)。相比之下react的组件化更彻底更清晰

两者的共同点：都支持组件化；都是数据驱动视图渲染；

技术选型：国内使用首推vue，文档更易读易学，社区大。如果团队水平较高，推荐使用react，组件化和jsx