// 引入useState
import { useState } from "react";
// hooks 為函數(shù)式組件提供一個屬性
// 作用 => 為函數(shù)式組件提供動態(tài)數(shù)據(jù)
// 語法 => let [默認數(shù)據(jù)變量，修改這個數(shù)據(jù)的方法] = useState('默認數(shù)據(jù)')
// // 1. 修改的是 基本數(shù)據(jù)類型
// function App(){
//   // 這里組件有一個動態(tài)的數(shù)據(jù)
//   // let salary=1800;
//   // 動態(tài)的數(shù)據(jù) =》 useState
//   let [salary,setSalary]=useState(1800);
//   const changeSalary=()=>{
//     // 讓salary => 改變值 => useState 處理的是基本數(shù)據(jù)類型
//     // setSalary(最新的數(shù)據(jù)) => salary 是最新的數(shù)據(jù)
//     setSalary(2000)
//   }
//   return (
//     <div>
//         <h2>我的工資{salary}</h2>
//         <button onClick={()=>changeSalary()}>修改數(shù)據(jù)</button>
//     </div>
//   );
// }
// // 2.修改復雜數(shù)據(jù)類型之 數(shù)組
// function App() {
//   // 動態(tài)數(shù)據(jù) => 數(shù)組
//   let [list, setList] = useState(["??", "?", "??"]);
//   const addItem = () => {
//     // 添加數(shù)據(jù)
//     let item = "??";
//     setList((state) => {
//       state.push(item);
//       return [...state];
//     });
//   };
//   const deleteItem =(index)=>{
//   // 修改數(shù)據(jù) list => 調(diào)用 他的修改數(shù)據(jù)方法 setList
//       // console.log(list,index);
//       // list.splice(index,1);
//       // 處理復雜的數(shù)據(jù)類型   => （處理方法）
//       // 處理方法 特點
//       // 第一個參數(shù) 就是默認數(shù)據(jù)
//       // 這個處理方法的返回值就是 最新的數(shù)據(jù)
//       setList((state)=>{
//         state.splice(index,1);  // 獲取到原理的數(shù)據(jù) => 根據(jù)索引刪除
//         console.log(state);
//         return([...state]); // 改變引用地址
//       })
//   }
//   return (
//     <div>
//       {list.map((item, index) => {
//         return <div key={index}>{item} <button onClick={()=>deleteItem(index)}>刪除</button></div>;
//       })}
//       <button onClick={() => addItem()}>添加</button>
//     </div>
//   );
// }
// 3 修改復雜數(shù)據(jù)類型之 對象
function App() {
  // 定義一個動他的數(shù)據(jù) 小明信息
  let [obj, setObj] = useState({ name: "小明", salary: 1800 });
  const changeSalary=()=>{
    setObj(state=>{
      // 1 獲取到原來的數(shù)據(jù)屬性，在添加我們需要更新的屬性
      return {...state,salary:state.salary+200}
    })
  }
  return (
    <div>
      <h2>
        {obj.name}的月薪{obj.salary} 每日笑哈哈
        <button onClick={()=>changeSalary()}>修改數(shù)據(jù) 學習后</button>
      </h2>
    </div>
  );
}
export default App;
/* 
    總結(jié) 函數(shù)式組件的動態(tài)數(shù)據(jù)的處理
    1 使用方式 useState
        語法 let [默認數(shù)據(jù)，修改數(shù)據(jù)的方法]=useState(默認值)
        1 基本數(shù)據(jù)類型 =>   修改數(shù)據(jù)方法(新的數(shù)據(jù))
        2 數(shù)組  => 修改數(shù)據(jù)的方法(()=>{
          retrun[...新的數(shù)據(jù)]
        })
        3 對象  => 修改數(shù)據(jù)方法（處理方法中自己合并舊的數(shù)據(jù)） => 合并原理的數(shù)據(jù)
*/

import { useEffect,useState } from "react";
 // useEffect => 副作用
    // 1 當組件的生命周期使用
        // 寫法 1 useEffect(()=>{}) => 1.加載完畢 2.更新完畢 3.組件摧毀
            // 1 加載完畢 => dom 操作，發(fā)動網(wǎng)絡(luò)請求 獲取到后端的數(shù)據(jù)
            // 2 組件更新
// 想要的組件的加載 和更新  =》 在工作中不用
// function App(){
//    let [salary,setSalary]=useState(1800); 
//     useEffect(()=>{
//         console.log(document.getElementById('h2'));
//         console.log('組件在瀏覽器上加載完畢，組件更新');
//     })
//    const addSaraly=()=>{
//     setSalary(salary+200)
//    }
//     return(
//         <div>
//             <h2 id='h2'>useEffect 作用</h2>
//             <h3>{salary}</h3>
//             <button onClick={()=>addSaraly()}>++</button>
//         </div>
//     )
// }
// // 2 發(fā)現(xiàn)我們需要這個副作用， 我們的生命周期（組件加載完畢） 執(zhí)行 mounted
// // 語法 useEffect(()=>{},依賴項)
// // // 如果這個依賴項為空的數(shù)組 useEffect(()=>{},[]) => 就相對于vue， 執(zhí)行一次
// function App(){
//     let [salary,setSalary]=useState(1800); 
//     console.log('組件created f')    // 還是會重新創(chuàng)建組件
//      useEffect(()=>{
//          console.log(document.getElementById('h2'));
//          console.log('組件加載完畢');
//      },[])
//      // useEffect(處理函數(shù)，依賴項)
//      // 處理函數(shù)和依賴項之間的關(guān)系
//      // 1 如果沒有依賴項，這個處理函數(shù)，只要這個函數(shù)重新執(zhí)行，處理函數(shù)就會重新執(zhí)行
//      // 2 如果有依賴項，但是這個依賴項為空數(shù)組，那么這個處理函數(shù)只會執(zhí)行一次
//     const addSaraly=()=>{
//      setSalary(salary+200)
//     }
//      return(
//          <div>
//              <h2 id='h2'>useEffect 作用</h2>
//              <h3>{salary}</h3>
//              <button onClick={()=>addSaraly()}>++</button>
//          </div>
//      )
//  }
//  function Children(){
//      return(
//          <div>
//          </div>
//      )    
//  }
// 2 相當于 組件的摧毀
function App(){
    let [salary,setSalary]=useState(1800); 
    console.log('組件created f')    // 還是會重新創(chuàng)建組件
    const addSaraly=()=>{
     setSalary(salary+200)
    }
     return(
         <div>
             <h2 id='h2'>useEffect 作用</h2>
             <h3>{salary}</h3>
             {
               salary==2000?<Children></Children>:<h4>444</h4>  
             }
             <button onClick={()=>addSaraly()}>++</button>
         </div>
     )
 }
 function Children(){
    // 組件的摧毀的生命周期
    // 寫法 => 是這個useEffect 處理函數(shù)式的返回值，并且是處理函數(shù)的返回值 是一個方法
    let timer=setInterval(()=>{
        console.log(1)
    },1000)
    useEffect(()=>{
        return()=>{
            console.log('組件摧毀了');
            clearInterval(timer)    // 清除全局
        }
    })
     return(
         <div>
                Children 
         </div>
     )    
 }
 /* 
    總結(jié)
        1 函數(shù)式組件的生命周期 
        2 另外的3個 是通過 react hooks 提供
            2.1 useEffect(()=>{},[])    =》 加載完畢 => 發(fā)送請求 dom操作
            2.2 組件的更新 => 工作中不用
            2.3 useEffect(()=>{return 方法})  =》 組件的摧毀 =》 清除這個組件全局定義的一個方法
 */
export default App;

import { useEffect,useState } from "react";
// useEffect =》 相當于vue中的watch
function App(){
    let [salary,setSalary]=useState(1800);
    let [name,setName]=useState('小紅'); 
    console.log('組件created f','還會不會重新創(chuàng)建組件？')    // 還會不會重新創(chuàng)建組件？
   // watch => 立即執(zhí)行
    useEffect(()=>{
        console.log(salary)
    },[salary])
    const addSaraly=()=>{
     setSalary(salary+200)
    }
     return(
         <div>
             <h2 id='h2'>useEffect 作用</h2>
             <h3>{salary}</h3>
            <button onClick={()=>addSaraly()}>++</button>
            <h3>{name}</h3>
            <button onClick={()=>setName('小明')}>修改</button>
         </div>
     )
 }
 // 總結(jié)： useEffect(()=>{},[依賴的數(shù)據(jù)源])，相對于立即執(zhí)行的偵聽器
 // useEffect 本質(zhì)就是一個宏任務(wù)
export default App;

// useContext => 提供上下文 =》 本質(zhì)=》全局變量
import React,{ useContext } from "react";
// 在最外層提供數(shù)據(jù)， 在里面可以獲取到數(shù)據(jù)
// 業(yè)務(wù)中的使用 => 全局設(shè)置主體，字體 dengdeng
// 使用：必須 提供數(shù)據(jù)provideer =》 React.createContext()
let Context =React.createContext()  // 返回一個對象 => 有一個屬性 provider => 提供數(shù)據(jù)
console.log(Context)
let theme={
    background:'red'
};
function App(){
     return(
        // 在父級組件中提供數(shù)據(jù)
        <Context.Provider value={theme}>
         <div>
            <Children></Children>
         </div>
         </Context.Provider>
     )
 }
 // 創(chuàng)建子組件
 function Children(){
    // 在子組件中需要獲取到父級組件提供的數(shù)據(jù)
    let datas=useContext(Context);  // inject()
    console.log(datas)  // {background: 'red'}
     return(
         <div style={{background:datas.background}}>
            Children
         </div>
     )    
 }
// 總結(jié) useContext =》 獲取到 React.createContext() 提供的數(shù)據(jù)
export default App;

import {useState, useReducer } from 'react'
// useReducer
// 用法 和useState 一樣，都是用來處理動態(tài)數(shù)據(jù)
// 作用 => 就是對動態(tài)的數(shù)據(jù)的行為（這個動態(tài)數(shù)據(jù)修改的方法）進行約束
// 語法 => let [默認數(shù)據(jù)，觸發(fā)reducer行為]=useReducer(reducer,默認數(shù)據(jù))
// reducer => 相當于vuex中 mutations
// 作用 => 定義行為（方法） => 修改動態(tài)數(shù)據(jù)
// reducer 是什么
// 1 它是一個函數(shù)
// 2 這個函數(shù)有兩個參數(shù)， 參數(shù)1 就是你的數(shù)據(jù)      參數(shù)2 行為
// 3 這個函數(shù)返回值 就是你最新的數(shù)據(jù)
// 4 只能處理同步問題
// 定義reducer
function reducer(state,actions){
    // 定義你處理邏輯 => add reduce
    switch(actions.type){
        case 'add':
            console.log(state);  // 默認參數(shù) 
            console.log(actions);    // 行為
            return state+actions.money
        case 'reduce':
            return state-200;
        default :
        return state;
    }
}
function App(){
    let [money,setMoney]=useState(1800);
    let [moneys,dispatch]=useReducer(reducer,1000)
    const changeM=()=>{
        setMoney('椅子')
    }
    return(
        <div>
            <h2>{money}</h2>
            <button onClick={()=>changeM()}>操作money</button>
            <h2>{moneys}</h2>
            {/* 觸發(fā)reducer => dispatch 觸發(fā)reduce行為
                dispatch(就是reducer actions)   => 這個actions 是一個對象   傳遞對象
            */}
            <button onClick={()=>dispatch({type:'add',money:300})}>add</button>
        </div>
    )
}
export default App
/* 
    總結(jié)：
    userReducer  核心
    reducer => 用來定義處理動態(tài)數(shù)據(jù)的行為的
    dispatch => 觸發(fā) reducer 中的行為
*/

import {useRef,useEffect} from 'react'
// useRef
// 作用 ：獲取到元素的真實dom
// 在created 生命周期中進行定義useRef
// 用法 let dom=useRef(null)
function App(){
    let dom =useRef(null)   // null
    let datas=100;
    useEffect(()=>{
        console.log(dom);// 獲取到真實的dom
        console.log(document.getElementById('h2s'));
    },[])
    return(
        <div>
            <h2 id='h2s' data-id={datas} ref={dom}>dom</h2>
        </div>
    )
}
/* 
    這個組件在創(chuàng)建的流程
    1 組件創(chuàng)建完畢  => 初始化 這個組件的屬性
    2 將這個組件 模板語法（jsx） => 變成vnode（ 1 如果有事件 集中處理，2 有屬性 進行綁定） =》 再將這個vnode 變成真實dom
    3 做一些dom操作
*/
export default App;

import {useEffect,useLayoutEffect,useState} from 'react'
function App(){
    // useLayoutEffect
    // 寫法 和useEffect 一樣的
  /* 
    useLayoutEffect 作用
        1 生命周期
            瀏覽器加載之前 ，更新之前 ， 摧毀之前
        2 監(jiān)聽
            當這個數(shù)據(jù) 發(fā)生改變之前就是執(zhí)行這個處理方法
  */
    let [age,setAge]=useState(100);
    // useEffect(()=>{
    //     console.log('加載完畢 useEffect');
    // },[])
    // useLayoutEffect(()=>{
    //     console.log('瀏覽器生成dom 之前 useEffect')
    // },[])
   useEffect(()=>{
        console.log('加載完畢 useEffect');
    },[age])
    useLayoutEffect(()=>{
        console.log(age)
        console.log('瀏覽器生成dom 之前 useEffect')
    },[age])
    return(
        <div>
           {age}
           <button onClick={()=>setAge(age+1)}>++</button>
        </div>
    )
}
export default App;
// useLayoutEffect =》 底層代碼是 微任務(wù)

// react 更新機制 => 組件重新創(chuàng)建
import React, { useState } from "react";
// // 組件模塊化劃分
// function App() {
//   console.log("father 組件重新創(chuàng)建了");
//   return (
//     <div>
//       {/* 模塊化劃分 */}
//       <Children2></Children2>
//       <Children1></Children1>
//     </div>
//   );
// }
// function Children2() {
//   console.log("children2222222222 組件重新創(chuàng)建");
//   let [salary, setSalary] = useState(1800);
//   const changeSalary = () => {
//     setSalary(salary + 200);
//   };
//   return (
//     <div>
//       月入{salary}
//       <button onClick={() => changeSalary()}>更新數(shù)據(jù)+200</button>
//     </div>
//   );
// }
// function Children1() {
//   console.log("children111111 組件重新創(chuàng)建");
//   return <div>children</div>;
// }
function App() {
  console.log("father 組件重新創(chuàng)建了");
  let [salary, setSalary] = useState(1800);
  const changeSalary = () => {
    setSalary(salary + 200);
  };
  return (
    <div>
      月入{salary}
      <button onClick={() => changeSalary()}>更新數(shù)據(jù)+200</button>
      {/* 
        不管父組件是否重新創(chuàng)建，這個子組件創(chuàng)建一次，如果子組件的數(shù)據(jù)沒有改變，就不需要重新創(chuàng)建
      */}
      <Keepchildren1></Keepchildren1>
    </div>
  );
}
/* 
    React.memo()=> 緩存組件
    語法： React.memo(需要緩存的組件) => 緩存組件
    特點：
        緩存組件  如果這個組件屬性值沒有變化就不會創(chuàng)建，反之，就會重新創(chuàng)建
*/
function Children1() {
  console.log("children111111 組件重新創(chuàng)建");
  return (<div>children</div>)
}
let Keepchildren1=React.memo(Children1)
export default App;
// 1 組件的渲染 => 先渲染父組件，再渲染子組件
// 2 如果我們在父組件中更新數(shù)據(jù) => 會重新渲染組件 => 這個父組件的嵌套組件（子組件），也會被重新渲染   => 會導致性能問題
// 解決方法（子組件數(shù)據(jù)更新，該子組件會重新創(chuàng)建，其父組件與兄弟組件不會重新創(chuàng)建）
    // 1 模塊化開發(fā) => 一個功能一個模塊

// react 更新機制 => 組件重新創(chuàng)建
import React, { useState,useMemo } from "react";
// useMemo  作用： 緩存變量
// 用法： let 緩存變量 = useMemo(()=>{},[監(jiān)聽的數(shù)據(jù)源])    // 當依賴的數(shù)據(jù)發(fā)生改變的時候才會更新
function App() {
  console.log("father 組件重新創(chuàng)建了");
  let [salary, setSalary] = useState(1800);
//   let name="張三";      // 這個數(shù)據(jù)寫死 => 不用更新
let Kname=useMemo(()=>{
    console.log('更新');
    return '張三';  // 緩存數(shù)據(jù)  當依賴的數(shù)據(jù)發(fā)生改變的時候才會更新
},[salary])
  const changeSalary = () => {
    setSalary(salary + 200);
  };
  return (
    <div>
      <h2>{Kname}</h2>
      月入{salary}
      <button onClick={() => changeSalary()}>更新數(shù)據(jù)+200</button>
    </div>
  );
}
 export default App;

import React, { useState,useMemo, useCallback } from "react";
// useCallback  作用： 緩存方法
// 用法： let 緩存方法 = useCallback(()=>{},[])
// 當依賴的數(shù)據(jù)發(fā)生改變的時候才會更新
function App() {
  console.log("father 組件重新創(chuàng)建了");
  let [salary, setSalary] = useState(1800);
  const getdata=()=>{
    console.log(1200);
  }
let Keepgetdata=useCallback(()=>{
    return getdata();
},[salary])
  const changeSalary = () => {
    setSalary(salary + 200);
  };
  return (
    <div>
      月入{salary}
      <button onClick={() => changeSalary()}>更新數(shù)據(jù)+200</button>
      <button onClick={()=>Keepgetdata()}>緩存方法</button>
    </div>
  );
}
 export default App;