参考视频:李立超b站react教程
一、创建脚手架
npx create-react-app my-app
cd my-app
npm start
二、css模块
使用步骤:
-
创建一个xxx.module.css
-
在组件中引入css,必须起一个名字
-
通过cssName设置样式
import cssName from 'xxx.module.css' return( <div> <div className = {cssName.div1}>div1</div> </div> )
三、useEffect
useEffect是一个钩子函数,需要一个函数作为参数,这个参数函数会在组件渲染完毕后执行
-
默认情况下,useEffect中的函数,会在组件渲染完成后调用,并且是每次渲染完成后都会调用
-
useEffect可以传递第二个参数
- 该参数是一个数组,在数组中可以指定Effect的依赖项
- 指定后,只有当依赖发生变化时,Effect才会重新渲染
- 通常会将Effect中使用的所有变量都设置为依赖项
- setState是由useState生成的,后者能够确保组件的每次渲染都会获得相同的setState对象,所以可以不把它放在依赖项中
- 如果依赖项设置了一个空数组,则useEffect只会在组件初始化时触发一次
-
在Effect的回调函数中,可以指定一个函数作为返回值
- 清理函数
- 会在下一次Effect执行前调用
- 可以在这个函数中做一些工作来清楚上次执行所带来的影响
useEffect(()=>{
console.log("重新渲染时执行");
return ()=>{
console.log("清理了上一个useEffect函数");
}
},[ctx]);//只有在ctx变化时才会执行
四、useReducer
const [state,stateDispatch] = useReducer(reducer,initialArg,init);
参数:
- reducer:整合函数,对于当前state的所有操作都应该在该函数中定义,该函数的返回值会成为state的新值,该函数有两个参数
- state:获取state的值
- action:一个对象,存储dispatch发送的指令
- initialArg:state的初始值
返回值为数组:
- state:用来获取state的值
- stateDispatch:state修改的派发器
- 通过派发器可以发送修改state的命令
- 具体的修改行为将会由另外一个函数(reducer)执行
//为了避免reducer的重复创建,该函数一般定义在组件的外部
const reducer = (state,action)=>{
if(action.type === "add"){
return state + 1;
}else if(action.type === 'sub'){
return state - 1;
}
return state;
}
const [state,stateDispatch] = useReducer(reducer,initialArg,init);
const chgState = ()=>{
stateDispatch({type:"add"});
};
五、useCallback
用来创建react中的回调函数,通过它创建的回调函数不会总在组件重新渲染时重新创建
- 第一个参数是回调函数
- 第二个参数是依赖数组,只有当依赖数组中的变量发生变化时,回调函数才会重新创建
const clickHandler = useCallback(()=>{
console.log("重新创建了");
},[dep1,dep2]);
六、Redux
安装依赖:yarn add react-redux @reduxjs/toolkit
1.使用rtk创建store
import {configureStore, createSlice} from "@reduxjs/toolkit";
// createSlice创建reducer的切片
// 它需要一个配置对象作为参数,通过对象的不同属性来指定它的配置
const stuSlice = createSlice({
name:"stu",
initialState:{//state的初始值
name:"djq",
age:18,
gender:"male"
},
reducers:{// 指定state的各种操作
setName(state,action){
// 这里的state是一个代理对象,可以直接修改
state.name = action.payload;
},
setAge(state,action){
state.age = action.payload;
}
}
});
// 调用函数后会自动创建action对象
// action对象的结构 {type:函数名,payload:函数的参数}
export const {setName,setAge} = stuSlice.actions;
// 创建store,需要一个配置对象作为参数
const store = configureStore({
reducer:{
stu:stuSlice.reducer,
}
});
export default store;
2.使用store
// index.js
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Provider store={store}>
<App/>
</Provider>
);
// App.js
import {setName} from "./store";
const App = () => {
// 加载state中的数据
const student = useSelector(state => state.stu);
// 通过useDispatch获取派发器对象
const dispatch = useDispatch();
const setNameHandler = () => {
dispatch(setName("djq2"));
};
return (
<div>
{student}
<button onClick={setNameHandler}/>
</div>
);
};
export default App;