react讲解（函数式组件，react hook）

---

前言

今天我们一起来学习react中的函数式组件，以及took的一些用法。

---

一.函数式组件

理解：

函数式组件中，没有 state 和 生命周期，所以又被称为 无状态组件，在早期 react 版本中，被当前纯渲染组件来用

作用

主要是用来渲染内容,函数名字就是组件名。

代码示例：

import  React,{
    useState} from 'react';
 
import Child from './Child'
/* 
 let [状态的值,修改状态的方法] =useState(状态的初始值);

*/

function App() {
   
  // console.log(this);
  // state = {
   
  //   data:["dd"]
  // }

  // let {data} =this.state;

  let [data,setData] =useState({
   
    name:'浩克',
    age:18
  }
    );


    let [show,setShow] = useState(true)
  return <div>
          {
   show ?<Child data={
   data}/>:""}
          <button onClick={
   ()=>{
   
            setData({
   name:"疯狂浩克",age:data.age
          });

          }}>变身</button>

          <button onClick={
   ()=>{
   
            setShow(false)
          }}>卸载</button>
         </div>
  
}

export default App;

函数组件注意事项

1.组件的第0个参数是props----接收父级传过来的信息

2.组件中的 return(必须写)----定义该组件要渲染的内容

3.没有生命周期,没有this,没有state

4.在16.7之前, 函数组件一直当做纯渲染组件来使用

二、React hook

React hooks 是React 16.8中的新增功能。它们使你无需编写类即可使用状态和其他React功能。

参考：https://reactjs.org/docs/hooks-intro.html

React Hooks 优势

• 简化组件逻辑
• 复用状态逻辑
• 无需使用类组件编写

Hook 使用规则

• 只在最顶层使用 Hook
• 只在 React 函数中调用 Hook
  • React 函数组件中
  • React Hook 中 - 我自己定义 hook 时，可以调用别的hook
• 所有的 hook 必须 以 use
  

2.常用的hook

useState

函数组件里定义状态值

​ 先引用useState,接着定义

​ let [状态值,修改状态的方法名]=userState(状态的初始值)

​ 修改状态值方法名是自己定义的

代码示例：

App.js

import  React,{
    useState} from 'react';
 
import Child from './Child'
/* 
 let [状态的值,修改状态的方法] =useState(状态的初始值);

*/

function App() {
   
  // console.log(this);
  // state = {
   
  //   data:["dd"]
  // }

  // let {data} =this.state;

  let [data,setData] =useState({
   
    name:'浩克',
    age:18
  }
 );
    let