react 组件和jsx

1.分为函数组件和class组件

函数组件

1.函数组件没有生命周期

2.函数组件没有this

  // 新写法
  // 首字母大写才是组件
  function Fc() {
    return <div>
      <Button type="primary">函数组件</Button>
    </div>
  }

class组件

  // 旧写法
  class Cc extends React.Component {
    render() {
      return <div>
        <Button type="primary">class组件</Button>
      </div>
    }
  }

 

2.方法执行和给方法加上<才是react.element;不然只是个方法

  // 解析成react.element
  console.log(Fc())
  // 只是一个方法
  console.log(Fc)
  // 解析成react.element
  let obj = Fc()
  // 解析成react.element
  let tag = <Fc></Fc>

 

3.jsx({}) 渲染规则

  // jsx({}) 渲染规则
  // 对象只能渲染element对象,普通对象报错
  // 方法、布尔值、undefined、null不渲染
  // 其他正常渲染
  function RenderRule() {
    return <div>
      <div>{'123'}</div>
      <div>{111}</div>
      <div>{[1, 2, 3]}</div>
      <div>{true}</div>
      <div>{undefined}</div>
      <div>{null}</div>
    </div>
  }