函数组件

函数组件和类组件的区别

1. 函数组件没有生命周期
2. 函数组件没有this
3. 函数组件通过hook来完成各种操作
4. 函数组件本身的函数体相当于render，组件的内容渲染在页面上是通过retrun返回
5. props属性在函数的第一个参数接受

函数组件写法

// App.js
// 函数组件
import Son from './son.js';
function App() {
  console.log(Son,"引入的Son函数");
  let msg = "I am gloria world tour";
  return (
    <>
      <h1>App 组件</h1>
      <Son faMess={msg}>
        <div>Son的子节点</div>
      </Son>
    </>
  )
}
export default App;

// son.js
const Son = (props) => {
    // props属性在函数的第一个参数接受
    console.log(props)
    return (
        <>
            <h2>son 组件</h2>
            <p>{props.faMess}</p>
        </>
    )
}
export default Son;