【React】React中编写CSS，Redux-Toy模板网

这篇具有很好参考价值的文章主要介绍了【React】React中编写CSS，Redux。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

❤️ Author：老九
☕️ 个人博客：老九的CSDN博客
🙏 个人名言：不可控之事乐观面对
😍 系列专栏：

React中编写CSS

内联样式

style接受一个采用小驼峰命名属性的JS对象，而不是CSS字符串，可以动态获取当前state中的状态
缺点：1.写法上面需要使用驼峰2.编写样式没有提示3.大量的样式，代码混乱4.某些样式无法编写(比如伪类、伪元素)

普通css

普通css通常会编写到一个单独的文件，之后再进行引入
缺点组件化开发中普通的css都属于全局的css，css没有作用域，样式之间会相互影响

css modules

需要把样式文件修改成.module形式，css modules解决了局部作用域的问题，但是引用的类名不能使用连接符号-，所有的className必须使用xxx.xxxx的形式来编写

这种类的写法是不行的

css in js

CSS in js是一种模式，其中CSS由js生成的而不是在外部文件中定义；注意此功能不是React的一部分，由第三方库提供
目前比较流行的是styled-components

标签模板字符串

正常的ES6模板字符串，这样使用
【React】React中编写CSS，Redux
而标签模板字符串，这样使用，相当于是调用了foo这个函数，然后把name和age传进去

得到的结果是这样的，分成三块，然后里面的模板的值作为数组传递进去

在代码中是这样拆分的

如何在React中使用css in js

创建一个style.js的文件，然后建一个AppWrapper变量，这个就相当于是一个div，styled.div的意思是调用styled-components库中的div函数，然后后面写的就是使用模板标签字符串，来添加css样式
【React】React中编写CSS，Redux
在App.jsx中使用AppWrapper元素

css in js 高级特性

可以引入this.state中传入的变量

通过写一个函数，调用传入的值参数为props的那个函数，自动回调从App组件传入的值

attrs属性

通过attrs属性，可以自己给样式组件加属性
attrColor如果App组件没传值，就用blue，如果传值了，就用传过来的props
【React】React中编写CSS，Redux

继承styled

通过styled()括号里写需要继承的样式
【React】React中编写CSS，Redux

ThemeProvider全局提供样式

通过ThemeProvider的theme里面写上样式，每个样式组件的props.theme中就都有这个属性了，写法是驼峰式的，jsx中没有横线“-”的写法，都是转成驼峰式的
【React】React中编写CSS，Redux

动态添加class

【React】React中编写CSS，Redux

Redux

如何创建redux

【React】React中编写CSS，Redux

修改store中的数据

通过store.getState()可以获取store中的数据，通过store.dispatch（{
type:“xxx”
xxx：xxx
}），调用这个方法之后，store就会将旧的state和dispatch中的对象一起传给reduer，然后传到reducer中实现更新，reducer返回一个state

【React】React中编写CSS，Redux

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

【React】React中编写CSS，Redux

订阅store中的数据

actionTypes的抽取

【React】React中编写CSS，Redux

actionCreators的抽取

【React】React中编写CSS，Redux

react-redux

【React】React中编写CSS，Redux

通过这个库，可以将我们的react的jsx页面和Redux更方便的联系在一起

connect原理

用在类组件中，函数组件直接使用useseletor获取值，usedispatch更新值就可以了

下面是connect源码

redux发送异步请求

通过安装redux-thunk，dispatch只能返回一个对象，如果加了redux-thunk中间件，就可以返回函数，从而实现异步请求

实现Redux

import { createContext, useContext, useEffect, useState } from "react";
export function createStore(reducer) {
  var state; // 存储应用程序状态的变量
  var action; // 最近一次分发的操作

  state = reducer(state, action); // 使用初始状态和初始操作来初始化状态

  var subscribes = []; // 存储订阅函数的数组

  return {
    getState() {
      return state; // 返回当前的状态
    },

    dispatch(action) {
      state = reducer(state, action); // 使用传入的操作和当前状态来更新状态
      for (var sub of subscribes) {
        sub(); // 通知所有订阅者，状态已更新
      }
      return action; // 返回分发的操作
    },

    subscribe(f) {
      subscribes.push(f); // 将订阅函数添加到订阅数组中
      return () => {
        var idx = subscribes.indexOf(f);
        if (idx >= 0) {
          subscribes.splice(idx, 1); // 取消订阅函数
        }
      };
    },
  };
}

export function connnect() {}

var ReduxContext = createContext();
//创建一个名字，可以在开发工具中的组件树展示出来
ReduxContext.displayName = "ReduxContext";
export function Provider(props) {
  //<Provider store = {store}><App/></Provider>
  var { store, children } = props;
  var [Change, setChange] = useState(0);
  useEffect(() => {
    var unsub = store.subscribe(() => {
      setChange((Change) => Change + 1);
    });
    return unsub;
  }, []);

  return (
    <ReduxContext.Provider value={{ store: store }}>
      {children}
    </ReduxContext.Provider>
  );
}

export function useSelector(selector) {
  var store = useContext(ReduxContext).store;
  var state = store.getState();
  return selector(state);
}

export function useDispatch() {
  var store = useContext(ReduxContext).store;
  return store.dispatch;
}