react 深入JSX

本质上来说JSX是React.createElement(component, props, ...children)方法的语法糖。

所以我们如果使用了JSX,我们其实就是在使用React,所以我们就需要引入React

import React from 'react';

然后我们写组件的时候,自定义组件的首字母是大写的,否则表示它是一个内置组件

看运行时确定类型时,遇到了一个问题,准确来说跟这个小节的内容不是特别有关,就是让我想起了一个内容,就是我们的react组件一般命名都是大写字母开头的,然后我试了一下这样的操作:

    function Hello() {
        return (
            

Hello

) } function World() { return (

World

) } const components = { hello:Hello, world:World }; ReactDOM.render(,document.getElementById('root'));

这样是可以正确渲染出来的,并不会报错,我觉得很奇怪,因为我们写的是这样的小写的组件,它为什么不判断为是内置组件呢?我想了一下,也许是因为有.操作符存在,所以React知道它是一个自定义的组件。如果我们换一种写法:

    function Hello() {
        return (
            

Hello

) } function World() { return (

World

) } const components = { hello:Hello, world:World }; const hello = components['hello']; ReactDOM.render(,document.getElementById('root'));

这样写,虽然hello和上面那个例子的components.hello完全是等价的,但是React把它识别为一个普通的组件,导致报错。

不得不说React是非常聪明的。

然后回到这一小节(运行时确定类型),就是说我们不能在元素标签的类型中使用表达式,比如:,这么写就是错的,如果我们要实现这种根据参数来改变组件的话,我们需要提前把它赋值给一个大写字母开头的变量,为什么要大写?我们刚说过,如果是小写,那么React就会识别为一个内置组件。最后就是这样:

const SpecificType = components[this.props.type];
return 

属性的默认值如果我们没有属性赋值,只是写了出来,那么它的默认值是true



这里的{true}不要以为是{true: true}哈,这个{}是在JSX中使用JS的标志。

传递属性
如果我们想要把属性对象(不一定真的是传递进来的,也可以是我们加工之后的)传递其他组件,那我们可以这么写。

function App1() {
  return ;
}

function App2() {
  const props = {firstName: 'Ben', lastName: 'Hector'};
  return ;
}

这样确实是非常方便的,省的我们写那些属性名啦,但是这可能让我们把过多的参数传递给某个组件,所以用的时候最好确保所有参数都是有意义的,不然有可能是代码变得混乱,谨慎使用。

子代
这个就是我们之前用到的,但是没有详细解释的一个地方。在开始标签和结束标签之间就是我们的props.children属性。

如果子代的字符串的话,props.children是移除两端的空格,中间的换行符是一个空格,内部的多个空格也是一个空格(和HTML一样)。

子代当然也可以是组件啦,我们之前就这么用过,当然,也可以是组件和字符串的结合啦,所以基本上子代可以是任何东西。props.children是一个数组按顺序包含所有的子代组件。

突然看到

render() {
  // 不需要使用额外的元素包裹数组中的元素
  return [
    // 不要忘记 key :)
    
  • First item
  • ,
  • Second item
  • ,
  • Third item
  • , ]; }

    包含在数组中的元素渲染出来可以不用元素包裹起来,这个厉害的嘛?我之前一直不知道,不过仔细想想我们之前其实已经用过了,当我们用map把一个数组转换为组件的时候,返回值就是一个数组嘛,我们也没有把它包在一个组件当中,观察还是不仔细呀。

    组件还可以是一个函数哦,我们可以把一些组件的"构造函数"传递进去:),当然用法我目前还了解的不多。

    在子代中,有几个情况是不渲染的,我们需要了解一下:

    {false}
    {null}
    {undefined}
    {true}

    这个规则也是我们能够使用条件渲染的前提,但也有一些特例,我们需要注意一下,就是数字00是一个falsy值,但是有时候我们随意使用的话会出现意料之外的事情,比如

    {props.messages.length && }

    我们本来是想当messages数组中没有内容的时候我们就不渲染啦,但是这个表达式props.messages.length && ....的值是0,React肯定不知道我们是输出0呢,还是表示false呢,所以它肯定不能因为0表示false,而不去渲染0,那么我们很多地方其实又需要渲染出0。所以我们尽量保证我们的逻辑表达式的返回值是布尔类型的返回值。
    如果我们需要输出false, null,undefined,true,我们需要先把它们转换为字符串类型。

    My JavaScript variable is {String(myVariable)}.

    你可能感兴趣的