函数组件

// 创建函数式组件
function Person (props) {
  console.log(props);
  let { name, age, sex } = props;   // 解构赋值
  return (
    <ul>
      <li>姓名: {name}</li>
      <li>性别: {sex}</li>
      <li>年龄: {age}</li>
    </ul>
  )
}

// 渲染组件到页面
ReactDOM.render(<Person/>, getElementById('test'))

小结

1. 函数式组件的函数参数为props
2. 函数式组件没有实例，没有this
3. 函数式组件没有state，如果函数式组件需要使用state，需要使用useState Hooks
4. 函数式组件没有生命周期函数，如果函数式组件需要使用生命周期钩子，需要使用useEffect
5. 函数式组件没有render方法，函数式组件的return返回jsx的结构，相当于class组件的render方法