1.useState函数-data 的定义-hook

react ^16.8 新增的变量定义方式-在函数式组件中代替state定义变量

useState() 会返回一个数组中携带两个参数，一个是定义的变量初始值，第二个是修改该数据的方法。

一般情况下，通过数组的解构，快速获取useState的两个返回值。

例：let [num,setNum] = useState(100);

• 基本数据类型

import { useState } from 'react';
import './App.css'

export default function App(){
      let [num,setNum] = useState(0)
    
      //修改数据--实现类似双向绑定的效果[页面改变-数据变]
      const changeNum = (e)=>{
        setNum(e.target.value)
      }
      //设置数据--直接覆盖[数据变-页面变]
      const setData = ()=>{
        setNum(1000)
      }

    return (
      <div>
        <h1>{num}</h1>
            <input type="text" onChange={changeNum}  value={num}/>
            <button onClick={setData}>直接设置数据</button>
      </div>
    )
}

• 引用数据类型

import { useState } from 'react';
import './App.css'


export default function App() {
    let [search, setSearch] = useState('')

    let [likes, setLike] = useState([]);

    //修改search 的数据
    const changeSearch = (e) => {
        setSearch(e.target.value);
    }
    //添加元素
    const addData = (e) => {
        setLike([...likes, search]);
    }

    return (
        <div>
            <input type="text" onChange={changeSearch} placeholder='添加搜索记录' value={search} />
            <button onClick={addData}>添加数据</button>
            <ul>
                {likes.map((item, index) => {
                    return <li key={index}>  {item} </li>
                })}
            </ul>
        </div>
    )


}

2.事件处理

React 元素的事件处理和 DOM 元素的很相似，但是有一点语法上的不同

• React 事件的命名采用小驼峰式（camelCase），而不是纯小写。
• 使用 JSX 语法时你需要传入一个函数作为事件处理函数，而不是一个字符串。

• 直接绑定事件执行函数

import React from 'react'

export default function Methods() {

  const btn = (e)=>{
    console.log('点你了...');
    //自带event 事件对象
    console.log(e);
    //阻止事件冒泡
    e.stopPropagation()
  }

  return (
    <div>
         <button onClick={btn}>点我呀</button>
    </div>
  )
}

• 绑定事件并传递参数

如果直接绑定事件，react 会误认为该函数是一个立即执行函数的js代码，这种绑定方式会导致每一次dom的更新都会调用一次该执行函数，如果需要在调用时传递参数就会出现bug.

解决方案：通过箭头函数返回一个调用执行函数 进行调用即可

import React from 'react'

export default function Methods() {

  const btn = (num)=>{
        console.log(num); //100
  }
  return (
    <div>
         <button onClick={()=>btn(100)}>点我呀</button>
    </div>
  )
}

• 绑定事件并传递数据和event对象

箭头函数接受event对象 继续作为实参传递给执行函数

import React from 'react'

export default function Methods() {

  const btn = (num,e)=>{
        console.log(num); //100
        console.log(e); //事件对象
  }
  return (
    <div>
         <button onClick={(e)=>btn(100,e)}>点我呀</button>
    </div>
  )
}

3. useEffect 函数式组件替代-生命周期

react 16.8 新增hook,代替类组件中的生命周期钩子

函数式组件中没有生命周期；只有类组件才会存在生命周期，类组件的创建，更新，销毁等生命周期。

useEffect 函数默认：进入页面就执行一次，以后render函数每执行一次（数据发生改变）就跟着执行一次。

常见用法：在react中的异步或副作用操作不太好处理。异步操作：ajax请求，副作用操作：定时器（副作用：需要清除）这个

useEffect 接受两个参数，useEffect (执行函数,[依赖项])

执行函数：函数体中 发送 ajax 并通过 useState解构的方法 更新数据

依赖项：值必须是一个数组，通知react 在哪些数据发生变更时，执行useEffect 的执行函数

useEffect (执行函数);   //进入页面执行一次，每次render执行一次
useEffect (执行函数,[]);   //进入页面执行一次，以后再也不执行，不依赖props 和 state中的数据进行触发
useEffect (执行函数,[num]);  //进入页面执行一次，num发生改变执行一次

    useEffect(() => {
        //发送axios请求
        getData({ id:1000 }).then(res => {
            if (res.data.code === 1) {
                //修改数据
                setList(res.data.list)
            }
        })
    }, [])

4.组件基础

• 父组件

import React from 'react'

// 导入子组件
import Son from '../components/Son/Son'
export default function App() {
  return (
    <div>
        {/* 使用子组件 */}
       <Son />
    </div>

  )
}

• 子组件

import React from "react";
//导入子组件
export default function Son(){

    return (
        <div>我是子组件</div>
    )
}

5.组件通信

react 的数据传递是单向数据流，父组件的数据发生改变，其所有使用了这个数据的 子组件 孙子组件 都会重新渲染

5.1 父传子 props

函数式组件-子组件的函数 接收形参 props 获取父组件传递的数据

• 父组件

import React, { useState } from 'react'

// 导入子组件
import Son from '../components/Son/Son'
export default function App() {
    //定义数据
    let [name,setName] = useState('张麻子')
    //更改数据
    const changeName = ()=>{
        setName('黄四郎')
    }
  return (
    <div>
        {/* 使用子组件 并传递数据 静态数据和动态数据 */}
       <Son title="我是爸爸组件传递的标题"  name={name}/>
       <button onClick={changeName}>更改数据</button>
       
    </div>
  )
}

• 子组件

import React from "react";
//导入子组件
//定义子组件时通过 形参接收 props 
export default function Son(props) {
    //接收数据-对象解构获取单个数据
    let { name, title } = props
    return (
        <div>
            <h1> {title}</h1>
            <h2>{name}</h2>
            <div>我是子组件</div>
        </div>
    )
}

5.2 子传父 子组件调用父组件传入的函数

父组件传递定义一个函数 传递给 子组件

子组件获取这个函数，并且调用该函数，调用时写入要传递的数据

• 父组件

import React from 'react'

// 导入子组件
import Son from '../components/Son/Son'
export default function App() {


  //定义一个函数--传递给子组件
  //子组件接收-调用该函数--并回传数据
  const getData = (data) => {
    console.log(data);  //打印获取的数据
  }
  return (
    <div>
      {/* 使用子组件 并传递数据 静态数据和动态数据 */}
      <Son getSonData={getData} />
    </div>
  )
}

• 子组件

import React from "react";
//导入子组件
//定义子组件时通过 形参接收 props 
export default function Son(props) {
    //获取父组件传递的函数
    let { getSonData } = props;
    //在事件中调用父组件传递过来的函数 并传入数据
    const sendData = () => {
        getSonData('我是子组件传给爸爸组件的数据')
    }
    return (
        <div>
            <button onClick={sendData}> 传递数据给父组件</button>
        </div>
    )
}