函数组件的基本使用

写法方式

---

采用es5和es6函数式写法。
export default () => {
  return (
    <>
      <div>测试</div>
    </>
  );
};

export default function (){
  return (
    <>
      <div>测试</div>
    </>
  )
}

函数组件中this指向

---

export default () => {
  console.log(this);//undefined
  return (
    <>
      <div>测试</div>
    </>
  );
};

export default function() {
  console.log(this);//undefined
  return (
    <>
      <div>测试</div>
    </>
  );
};
函数组件中this指向不存在

注意：函数组件在16.8版本之前主要用于UI界面的渲染。在之后出现hook API 给函数组件提供了类似周期和叶落代码功能，以及自身存在状态。

总结：类组件和函数组件区别：类组件存在自身维护的状态以及周期，函数组件在16.8之前只负责UI渲染。在这之后可以存在自身状态以及类似周期完成负责业务。

函数组件操作jsx数据

---

用法和类组件一致 注意this

export default function () {
  // console.log(this);//undefined
  let name = "名称";
  let cName = "btn";
  let arr = [
    {
      name: "小花",
    },
    {
      name: "小黑",
    },
  ];
  //定义事件处理函数
  let handler = (e) => {
    console.log("触发", e);
  };
  //事件传值方式
  let handlers = (a, b, e) => {
    console.log(a, b, e);
  };
  return (
    <>
      {/* 绑定内容 */}
      <div>测试-{name}</div>
      {/* 属性绑定 */}
      <button className="btn">按钮</button>
      <button className={cName}>按钮</button>
      <button className={["btn", "btns"].join(" ")}>按钮</button>
      <button className={["btn", true ? "btns" : ""].join(" ")}>按钮</button>
      <button className={`btn ${cName}`}>按钮</button>
      <button style={
    
    { width: 100, height: 100 }}>按钮</button>
      {/* 循环渲染元素 */}
      <ul>
        {arr.map((item, index) => {
          return <li key={index}>{item.name}</li>;
        })}
      </ul>
      {/* 事件 */}
      {/* 下面这种事件绑定不写（） */}
      <button onClick={handler}>按钮</button>
      {/* 下面这种方式可以直接带括号 */}
      <button onClick={() => handler()}>按钮</button>
      {/* 事件调用传值 */}
      <button onClick={handlers.bind(null, 1, 2)}>按钮</button>
      <button onClick={(e) => handlers(1, 2, e)}>按钮</button>
    </>
  );
}

暂时在函数组件中定义的普通变量直接点击修改不能让函数组件触发更新。界面也不更新

 let handlers = (a, b, e) => {
    console.log(a, b, e);
    name = "小小";
  };

函数组件中使用子组件

---

//父组件引入
import BottomBox from "./component/BottomBox";
import TopBox from "./component/TopBox";

//父组件挂载使用
{/* 挂载子组件 */}
<TopBox></TopBox>
<BottomBox></BottomBox>
//命名规则首字母大写

创建界面小组件也可以写在同一个文件下（单暴漏）

export const Menu=()=>{
    return (
        <>
        <div>测试Menu</div>
        </>
    )
}

export const MenuTop=()=>{
    return (
        <>
        <div>测试MenuTop</div>
        </>
    )
}

import { MenuTop, Menu } from "./component/index";