Basic use of function components

Way of writing

---

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

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

This points to in the function component

---

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

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

Note: Before version 16.8, function components were mainly used for rendering UI interfaces. Later, the hook API appeared to provide function components with functions similar to cycle and leaf-fall code, as well as their own existence status.

Summary: The difference between class components and function components: class components have their own maintenance state and cycle, and function components are only responsible for UI rendering before 16.8. After this there can be its own state and similar cycle completion responsible business.

Function components operate jsx data

---

The usage is consistent with the class component, pay attention to 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>
    </>
  );
}

Temporarily clicking and modifying ordinary variables defined in the function component cannot cause the function component to trigger an update. The interface is not updated

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

Use child components in function components

---

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

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

Create interface widgets can also be written in the same file (single exposure)

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

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

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