React学习 -- JSX

秒速五厘米 2022-06-17 11:49 161阅读 0赞

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解析。