React 组件开发

前言

React 自从在 v16.8版本引入了 Hooks能力之后，函数式组件➕Hooks 就注定成为趋势，类组件被慢慢废弃。在新版本的 React 官方文档中已经看不到类组件的概念了，全部模版都是函数式组件的方式。
因此之后提起 React 组件的时候全部是指代的是函数式组件。

定义组件

在 react 中，组件就是一个返回标签的 JavaScript 函数。
函数的名字就是组件的名字，且必须以大写字母开头。

function MyButton() {
  return (
     <button>I'm a button</button>
  )
}

内部数据

在组件中常常需要用到数据，动态渲染在组件模版中。
组件其实就是个函数，可以直接在函数中定义一个 js 变量，并在模版中使用。
变量在模版中使用的方式为 { }，标签属性也是一样的。

function MyButton() {
  let text = "I'm a button";
  let id = "myButton";
  return (
     <button id="{id}"> {text}</button>
  )
}

如果 text 和 id 等变量的值变化了，视图是不会重新渲染的，也就是说引用这些变量的模版渲染出来的页面对应的值是不会变化成新的的值的。

但我们常常需要在数据变化的时候，让视图也重新渲染出新的值。react 提供了特定的 hook 来定义数据。
即 useStatehook ，用法如下：

import { useState } from "react";
function MyButton() {
  let [text, setText] = useState(""I'm a button"");
  function handleClick() {
    setText("new text");
  }
  return (
     <button onClick={handleClick}> {text}</button>
  )
}

内部方法

在组件中定义一个方法，就是定义一个常规的 JavaScript 函数，在模版中使用即可。
在模版中使用方法作为事件处理函数的时候，只需要传递函数名即可，不需要调用函数。
同时模版中的事件名要写成小驼峰式，如 onclick-> onClick。

function MyButton() {
  function handleClick() {
    console.log("点击了按钮")
  }
  return (
     <button onClick={handleClick}> 按钮 </button>
  )
}

外部数据

组件除了使用内部定义好的数据外，还可以接收外部传递过来的数据，这些外部数据在使用组件的时候确定。

组件函数接收一个 props 参数，也是函数组件唯一的参数。该参数包含了使用组件时传递的全部属性。

function MyButton(props) {
  return (
     <button>{ props.title }</button>
  )
}
// 使用
<MyButton title="I'm a button"/>

可以使用 es6 的解构语法如下：

function MyButton({ title }) {
  return (
     <button>{ title }</button>
  )
}
// 使用
function App() {
  return (
    <MyButton title="I'm a button"/>
  )
}

改变外部数据

react 规定，组件不能改变 props 外部数据。如果需要改变，则需要同时传递一个改变数据的方法进来，在恰当的时机调用。

import { useState } from "react";
function MyButton({ title, handleClick }) {
  return (
     <button onClick="{handleClick}">{ title }</button>
  )
}
// 使用
function App() {
  const [title, setTitle] = useState("I'm a button");
  function handleClick() {
    setTitle("new text");
  }
  return (
    <MyButton title="{title}" handleClick="{handleClick}"/>
  )
}