React学习 -- JSX

React为了方便组件化，需要构建HTML结构化页面。那么React是如何操作的呢？答案是，React通过创建与更新虚拟元素来管理整个虚拟DOM。

虚拟DOM是什么：由于DOM操作开销比较大，并且频繁的操作DOM会使得代码难以维护，React将DOM树转化成了JavaScript对象树，也就是虚拟DOM（Virtual DOM）。
每次数据更新后，React会先重新计算虚拟DOM，并和上次生成的虚拟DOM做对比，仅仅对发生变化的部分做批量更新（批量更新的性能要远好于一次一次单独的更新）。

虚拟元素是什么：虚拟元素就是真实元素的映射，但是它们的创建和更新都是在内存中完成的，不会真正的去渲染浏览器DOM树。虚拟元素可以分为两类：DOM元素和组件元素，分别对应的是：原生的DOM和用户自定义元素（比如说我们可以自己定义：< myDiv >）。

虚拟元素之–DOM元素：

当我们使用JavaScript来描述HTML元素的时候，这些元素可以被抽象为一个JSON对象（也就是Node节点），例如，一个按钮：

<button class="btn btn-blue"> 
    <em>Confirm</em>
</button>

如果转换为JSON对象：

{ type: 'button',props: { className: 'btn btn-blue',children: [{ type: 'em',props: { children: 'Confirm' }
        }] 
    }
}

这样，我们就可以根据这段代码，在JS中创建的虚拟DOM元素，最后再将虚拟DOM转化为浏览器上真正的DOM。

虚拟元素之 – 组件元素（用户自定义元素）

对于上述的button元素，我们可以很容易地进行封装成某个个性化的按钮：

const ColorButton = ({ color,text }) => { 
    return {
         type: 'button',props: {
            className: `btn btn-${color}`,
            children: {
                type: 'em',props: {
                    children: text,},}; 
}

然后，在需要生成按钮的时候，直接调用 ColorButton({color:'blue',text:'Confirm'}) 就可以创建。

现在我们发现，button：一个JSON对象，ColorButton({color:'blue',text:'Confirm'}) 也返回一个JSON对象，那么，MyButton()其实和button的地位是一样的，它也可以作为元素而存在。
进一步的，我们就可以有这样的写法：

{ type: ColorButton,props: { color: 'blue',2 children: 'Confirm' }
}

‘这也是React的核心思想之一。因为有公共的表达方法，我们就可以让元素彼此嵌套或混合。’

元素层层嵌套、封装，形成了React组件，最终，我们可以采用递归的方式构建出一个完全的DOM元素树。

于是，我们还可以将ColorButton继续封装：

const DangerButton = ({ text }) => ({ 
    type: Button,props: {
         color: 'red',4
        children: text 
    }
});

然后所有这些都可以作为某个新元素的子节点：

const DeleteAccount = () => ({ 
    type: 'div',
    props: {
        children: [
            {   
                type: 'p',
                props: {
                children: 'Are you sure?',}
            },{
                type: DangerButton,
                props: {
                    children: 'Confirm',{
                type: Button,
                props: {
                    color: 'blue',children: 'Cancel',}],}
});

我们已经可以看出，这个仅嵌套了两层的虚拟元素已经有点复杂了。。。

于是，JSX语法为我们解决了这个问题：

const DeleteAccount = () => (  
    <div>
        <p>Are you sure?</p> 
        <DangerButton>Confirm</DangerButton>  
        <Button color="blue">Cancel</Button>
    </div> 
);

JSX将HTML和JS结合在一起，再通过编译器转化为纯JS后由浏览器执行。

基本语法：

元素类型：DOM元素首字母小写，组件元素首字母大写。

元素属性：

在JSX的虚拟元素中，DOM元素和组件元素都有属性。但是需要注意，DOM元素的属性：class／for是JS关键词，因此React做了如下转换：

class -> className 
for -> htmlFor

组件元素的属性则都是完全自定义的属性。

// define
const Header = ({title,children}) => ( 
    <h3 title={title}>{children}</h3>
);

// usage
<Header title="hello world">Hello world</Header>

属性表达式：
如果属性的值需要表达式来计算，只要用大括号替换双引号即可：

const person = <Person name={window.isLoggedIn ? window.name : ''} />;

因为JSX解析的方法是，遇到<…就按照HTML解析，遇到{}，就按照JS解析。

React学习 -- JSX

相关文章