React函数式组件的介绍（useState和useEffect）

在React开发中，有类组件和函数式组件，现如今函数式组件越来越流行，这里简单介绍一下React中的函数式组件

函数式组件的特点

1. 函数式组件没有生命周期 ；
2. 函数式组件没有类组件中的this ；
3. 函数式组件没有state状态 ；

//函数式组件
function App(){
	return (
		<h2>Hello World</h2>
	)
}

介绍Hooks

对于函数式组件所不具备的功能，于是一开始函数式什么都用不了，所以后面出现了Hooks，也称钩子，Hooks的出现也就弥补了函数式组件的不足，慢慢地就越来越受到React开发者的喜爱，这里介绍两个常用的Hooks，useState和useEffect

useState的使用

useState用于渲染页面的状态，相当于类组件的state

定义useState变量

//a是定义的变量，setA是用来改变a的方法,"你好世界"是a的初始值
const [a,setA]=useState("你好世界")

完整代码
这里是将

import {useState} from 'react'

function App(){
	//Hook只能用在组件函数最顶层
	const [a,setA]=useState("你好世界")
	return (
		<div>
			<h2>{a}</h2>
			<button onClick={()=>setA("hello world")}>修改A的值</button>
		</div>
	)
}

export default App;

useEffect的使用

useEffect 就是一个 Effect Hook，给函数组件增加了操作副作用的能力。它跟 class 组件中的 componentDidMount、componentDidUpdate 和 componentWillUnmount 具有相同的用途，只不过被合并成了一个 API。

函数式组件没有生命周期，函数式组件没有区分挂载后，更新，卸载后的方法，统一使用useEffect，至于使用useEffect区分生命周期，希望下面的代码对你有所帮助

代码演示

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

//组件挂载和更新时显示
  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });
  
//    只在组件挂载后显示，只需要加个空数组做参数即可
//    useEffect(() => {
//        document.title = `You clicked ${count} times`;
//    },[]);
 
//    销毁阶段
//    useEffect(() => {
//        return ()=>{
//				console.log("销毁阶段")
//			}
//    });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

总结

文章是写给人看到，但博主可能只是新手，以上的介绍仅仅是抛砖引玉，想具体了解函数式组件Hook的使用可以查看官方文档Hook 简介