掌握React100问 进度条：7~9

7.一个最简单的react组件代码是什么样子？

react组件写法发展主要分为两个阶段，18年react16.8出来之前流行类组件写法，react16.8出来之后就流行函数式写法，因为有了hooks（留个悬念，以后学）

要学哪一种？推荐写函数式，大趋势，要维护老项目就得学类组件写法

类组件：

class Test extends React.Component {
    render() {
        return <div>hello react!</div>
    }
}

函数式组件：

function Text() { 
    return <div>hello react</div>
}

8.书写jsx有什么注意事项？

• jsx顶层只能有一个根元素

<div>1</div>

上面代码有错吗？要怎么改？

//正确写法

<div>
    <div>1</div>     <div>2</div>
<div>
//或者
<>
    <div>1</div>     
    <div>2</div>
<>

<></>可以理解为一个用来包裹的工具人，除了包裹jsx语句外没有其他任何作用，也不会被babel转化为dom元素

• jsx可以单标签，也可以是双标签，需要注意的是单标签一定要以 />结尾

9.jsx语句里除了写类似html的语句还可以写什么？

• 运算表达式 

  {1+1}

• 三元运算符

  {one === '1' ? '是' : '否'} // one是一个变量

• 执行一个函数

  function meiNv() { return

  送给读者一个美女
  }

  function yuanWang() { return

  {meiNv()}
  }

• jsx里写注释

跟写js注释一样， **//**这样就可以注释

• jsx写变量

<div> {a}

注意：变量分为3种情况，
情况一：变量为null、undefined、Boolean类型时，界面不显示

情况二：变量为Number、String、Array时，可以直接显示

情况三：变量为Object对象时，会报错