reacthooks综合运用的一个小例子（reacthooks只能在组件中调用吗？好像是的）

麻雀虽小五脏俱全&＃xff0c;每个东西拆开起来 很好学&＃xff0c;但要是综合在一起 运用起来做个小项目 又有点难度了 我是看 B站的一个大佬的 敲得小demo 我也是练习了好多次 也是勉强熟练掌握 大佬就是大佬 佩服佩服

csdn 好像不让放外部链接 是 一个叫做技术胖的大佬 大家可以去看下他的 react hooks视频 讲的很好

就是下面的这个小demo 结合了 useReducer useContext createContext
第一看的时候 传来传去 把我也传晕了 敲了两次 慢慢有了感觉 毕竟我也是刚入手的react 哈哈 任重而道远

其实吧 拿到 需求上来就写代码 都是不明智的 应该先对项目进行分析 然后对项目结构和代码目录进行 分析

我是这样划分的
将展示区域和按钮区域分别放在一个组件中 并存放到 一个 components 文件夹中

因为要用到 useReducer 所以 建立一个 reducer文件夹 用来存放 reducer函数

之后是 将两个组件存放到 一个 视图 Color 中

下面就开始写代码了
App.js中 就是引入各种文件 这个没啥难度

import React from &＃39;react&＃39;
import { Color } from &＃39;./views/Color&＃39;;
import Button from &＃39;./components/Button.js&＃39;;
import ShowArea from &＃39;./components/ShowArea.js&＃39;;export default function App(){return (<><Color><ShowArea/><Button /></Color></>)
}


Color.js

import React, { useReducer,createContext } from &＃39;react&＃39;;
import reducer from &＃39;../reducer&＃39;; // 引入reducer函数
export const ColorContent &＃61; createContext({}); // 创建上下文对象
export const UPDATE_COLOR &＃61;"UPDATE_COLOR"; // 这个用来改变 颜色值的类型
export const Color&＃61; props&＃61;>{const [color, dispatch] &＃61; useReducer(reducer, &＃39;pink&＃39;);return (// 传递一个对象 应该是 {{ name:"zhao",age:24}}// 将 color 和dispatch 传递给子组件中<ColorContent.Provider value&＃61;{{color,dispatch}}>{props.children}</ColorContent.Provider>)
}

reducer.js

import { UPDATE_COLOR } from &＃39;../views/Color&＃39;
export default function reducer(state, actions) {switch (actions.type) {case UPDATE_COLOR:return actions.color;default:return state;}
}


ShowArea.js

import React,{useContext} from &＃39;react&＃39;;
import { ColorContent } from "../views/Color"function ShowArea(){const { color } &＃61; useContext(ColorContent); // 拿父组件传来的值return (<><div style&＃61;{{width:&＃39;100px&＃39;,height:&＃39;100px&＃39;,backgroundColor:color}}></div></>)
}export default ShowArea;

Button.js

import React,{useContext} from &＃39;react&＃39;
import { ColorContent,UPDATE_COLOR } from "../views/Color"function Button(){const { dispatch } &＃61; useContext(ColorContent);function blue() {dispatch({ type: UPDATE_COLOR, color: &＃39;blue&＃39; });}function red() {dispatch({ type: UPDATE_COLOR, color: &＃39;red&＃39; });}return (<><button onClick&＃61;{blue}>蓝色</button><button onClick&＃61;{red}>红色</button></>)
}export default Button;