一、创建脚手架

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);

扫描二维码关注公众号，回复： 14641927 查看本文章

参数：

reducer：整合函数，对于当前state的所有操作都应该在该函数中定义，该函数的返回值会成为state的新值，该函数有两个参数
1. state：获取state的值
2. 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;

React（3）--脚手架基础

文章目录