React Hooks入门学习

import React, { useState, useEffect } from "react";
// useState状态钩子，一个页面能有很多装填钩子（当一个函数中处理多个钩子时，只是把相同的钩子合并一个，只执行一次）
import React, { useState, useEffect } from "react";
import './index.less'
import { Input, DatePicker, Pagination } from 'antd';
const { RangePicker } = DatePicker;
const Product = () => {
  const [state, setState] = useState({
    total: 0,
    add: 0,
  })
  const [searchData, setSearchDate] = useState({
    stare_time: '',
    end_time: '',
    input_value: ''
  })
  const [page, setPage] = useState({
    current: 1,
    page_size: 15,
    total: 200,
  })
  const data = [
    {
      title: '2022年新乡陆港中亚班列境外段铁路运力2022年新乡陆港中亚班列境外段铁路运力2022年新乡陆港中亚班列境外段铁路运力2022年新乡陆港中亚班列境外段铁路运力',
      time: '2021-04-13',
      unit: '中国新闻网'
    },
    {
      title: '2022年新乡陆港中亚班列境外段铁路运力2022年新乡陆港中亚班列境外段铁路运力',
      time: '2021-04-13',
      unit: '中国新闻网'
    },
    {
      title: '2022年新乡陆港中亚班列境外段铁路运力2022年新乡陆港中亚班列境外段铁路运力',
      time: '2021-04-13',
      unit: '中国新闻网'
    },
    {
      title: '2022年新乡陆港中亚班列境外段铁路运力2022年新乡陆港中亚班列境外段铁路运力',
      time: '2021-04-13',
      unit: '中国新闻网'
    },
    {
      title: '2022年新乡陆港中亚班列境外段铁路运力2022年新乡陆港中亚班列境外段铁路运力',
      time: '2021-04-13',
      unit: '中国新闻网'
    },
  ]
  const [tableData, setTableData] = useState(data)
  const changeVal = e => {
    setSearchDate({
      ...searchData,
      input_value: e.target.value
    })
  }
  const changeDate = (value, dataString) => {
    setSearchDate({
      ...searchData,
      stare_time: dataString[0],
      end_time: dataString[1]
    })
  }
  const log = () => {
    console.log(state, searchData);
  }
  return <div className="product_box">
    {/* 左边左边 */}
  <div className="left">
    <div className="left_top">
      <p className="title">舆情总览 (近15天)</p>
      <div className="left_top_bottom">
        <p className="img_1 common"></p>
        <p className="title_p1 common_size_title">{state.total}</p>
        <p className="common_size_1 title_p1_1">舆情总数（条）</p>
        <p className="img_2 common"></p>
        <p className="common_size_title title_p2">{state.add}</p>
        <p className="common_size_1 title_p1_2">昨日新增（条）</p>
      </div>
    </div>
    <div className="left_content">
      <p className="title">舆情态势（近15天）</p>
      <span>数量</span>
      <div className="echarts_box"></div>
    </div>
    <div className="left_footer">
      <p className="title">舆情词云</p>
      <div className="main"></div>
    </div>
  </div>
  {/* 右边布局 */}
  <div className="right">
    <div className="top">
      <span>关键词</span>
      <Input placeholder="请输入关键词" value={searchData.input_value} onChange={() => {changeVal(event)}} className='search_input'/>
      <span>发布日期</span>
      <RangePicker format="YYYY-MM-DD" onChange={changeDate} placeholder={['开始时间', '结束时间']} className="date_box"/>
      <div className="btn" onClick={log}>搜索</div>
    </div>
    <div className="table_box">
      <ul>
        {/* 循环列表 */}
        {tableData.map((item, index) => {
          return <li key={index}>
            <p>{item.title}</p>
            <span>{item.time}</span>
            <span>{item.unit}</span>
          </li>
        })}
      </ul>
    </div>
    <div className="page_box">
      <p>为您找到 <span>910,278</span> 条相关结果</p>
      <Pagination defaultCurrent={page.current} showSizeChanger={false} total={page.total} />
    </div>
  </div>
</div>
}
export default Product

// useContext()：共享状态钩子()
// childrenOne和childrenTwo需要共享状态
<div className="App">
  <childrenOne />
  <childrenTwo />
</div>
// 改写上面的代码
const AppContext = React.createContext({})  // 在外部建立一个 Context
<AppContext.Provider value={{
  name: '张三'
}}>
  <div className="App">
    <childrenOne />
    <childrenTwo />
  </div>
</AppContext.Provider>
// AppContext.Provider提供了一个 Context 对象，这个对象可以被子组件共享。

// 在childrenOne组件中使用：
const childrenOne = () => {
  const { name } = useContext(AppContext);
  return (
    <div className="box">
      <div>{ name }</div>
    </div>
  );
}
export default childrenOne

// useEffect()：副作用钩子(在组件创建时触发;return的函数为组件销毁时触发；) 第二个参数：若为空数组：则初始化和销毁时执行。若有值，则值发生变化都会重新执行useEffect函数
  useEffect(() => {
    console.log('执行');
    return () => {
      console.log('销毁');
    }
  }, [])

// React 本身不提供状态管理功能，通常需要使用外部库。这方面最常用的库是 Redux。
// Redux 的核心概念是，组件发出 action 与状态管理器通信。状态管理器收到 action 以后，使用 Reducer 函数算出新的状态，Reducer 函数的形式是(state, action) => newState。
// useReducers()钩子用来引入 Reducer 功能。第一个参数：执行的函数，第二个参数state状态
const childrenOne = () => {
  // changeCount只是针对state状态有用，如果多个状态，需要再次创建useReducer
  const changeCount= (state, action) => {
    switch(action.type)  {
      case('add'):
        return  {
          ...state,
          count: state.count + 1
        }
      ...
      default:
        return  state;
    }
  }
  const [state, dispatch] = useReducer(changeCount, { count:   0 });
  return (
    <div className="box">
      <button onClick={() => dispatch({ type: 'add' })}>
        叠加
      </button>
      <div>{state.count}</div>
    </div>
  );
}
export default childrenOne