编辑代码

/* 
1、讲一讲什么是React
思路：讲概念、说用途、理思路、优缺点
答案：React是一个用于构建用户界面的JavaScript库，通过组件化的方式解决视图层开发复用的问题，
它的核心设计思路有三点，分别是声明式、组件化和通用性
声明式的优势在于直观与组合
组件化的优势在于视图拆分与模块复用，可以更容易做到高内聚低耦合
通用性在于一次学习，随处编写，比如React Native、React 360等，这里主要靠虚拟DOM来保证实现。
由于虚拟DOM的优势，使得React的使用范围变得足够广，无论是Web、Native、VR，甚至Shell应用都可以进行开发。
但作为一个视图层的框架，React的劣势十分明显，它没有提供完整的整套方案，在开发大型应用时，需要向社区寻找并整合方案
虽然一定程度上促进社区的繁荣，但也为开发者在技术选型和学习上造成一定的成本
*/


/*
2、为什么要用jsx?
首先要理解jsx本质上是render函数的语法糖，假如不用jsx，会写如下形式
*/
function Hello (props) {
    return React.createElement(
        'div',
        {
            style: {
                width: '100px',
                backgroundColor: '#ccc'
            }
        },
        `Hello {props.name}`
    )
}
ReactDOM.render(
    React.createElement(
        Hello,
        {
            name: 'World'
        },
        null
    ),
    document.getElementById('root')
)
// 而写成jsx就简单很多
function Hello (props) {
    return <div style={{width: '100px', backgroundColor: '#ccc'}}>{props.name}</div>
}
ReactDOM.render(
    <Hello name="World" />,
    document.getElementById('root')
)
/*
一句话总结：JSX更易于阅读和编写，在没有JSX的时候，实现一个组件需要
依赖createElement函数，且编写JSX就像写HTML一样，学习成本低。
*/

/*
3、jsx是如何通过Babel转换成js的?
首先babel是一个SourceToSource的编译器，有三个阶段
parse: 通过parser把源代码
transform: 通过便利AST，调用各种插件对AST进行转换，包括语法转换、代码优化等，最终生成新的AST
generate: 把转换后AST打印成最终代码，生成sourceMap
AST的值大概如下：
{
    type: 'ExpressionDeclaration',
    start: 0,
    end: 17,
    expression: {
        type: 'CallExpression',
        ...
    },
    generator: false,
    async: false,
}
遍历AST的过程有点多，大意就是，判断节点的type是否是ExpressionStatement和expression.type是否为CallExpression，
进行处理，有调用的存起来，没有的path.remove()掉
*/