React 18

React + Redux + Router路由 + TS

安装插件 React Developer、Redux DevTools、极简插件;
babel
classnames库
dayjs

1 React

组件化开发方式、性能优秀(vnode、fiber)、丰富生态、跨平台支持(React native支持ios、安卓)

1.1 下载React项目

利用npx create-react-app react-basic下载项目,下载好项目之后启动项目

package.json中reactreact-dom是最核心的包;

index.js:项目入口文件,引入根组件

App.js:项目根组件

index.js文件

index.html文件

1.2 JSX

JSX需要通过解析工具babel,做解析之后才能在浏览器中运行;
https://babeljs.io/

1.3 Hooks

Hooks文章

const [count, setCount] = useState(0);
count状态变量 ,与普通js变量不同的是,状态变量值发生变化 会驱动 视图发生变化

count++ 会改变count 值,但不引发视图更新;想要触发视图更新,必须使用setCount

javascript 复制代码
let [count, setCount] = useState(0);
const handleClick = () => {
  count++;
  console.log(count); // count变为 1
  setCount(count + 1); // 视图更新后,count展示的结果是2
}

这里的重点是使用新值替换老值,不可以直接修改老值;对象也同理:setForm({...form, name: 'john'});

1.4 classnames库

classnames库

javascript 复制代码
import classNames from 'classnames';
className={classNames('nav-item', { active: type === 'hot' })}

2 Redux

Redux DevTools 扩展程序

Redux:React最常用的集中状态管理工具,可以独立于框架运行;

核心:stateactionreducer
Redux原理

  • Redux Toolkit:工具包;
  • react-redux:链接redux和react组件的中间件;
javascript 复制代码
npx create-react-app react-redux // 使用CRA快速创建React项目
npm i @reduxjs/toolkit react-redux // 安装配套工具
npm run start // 启动项目

在src目录下新建store目录

Redux store配置

React组件: 使用 react-redux注入store;使用/修改store中的数据

index.js文件

javascript 复制代码
import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './modules/counterStore';

// 创建根store组合子模块
const store = configureStore({
  reducer: {
    counter: counterReducer
  }
});

export default store;

React组件index.js文件

javascript 复制代码
import store from './store';
import { Provider } from 'react-redux';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <Provider store={store}>
    <App />
  </Provider>
)
javascript 复制代码
import { useSelector, useDispatch } from 'react-redux';
import { decrement, increment } from '.store//modules/counterStore';

function App() {
  const { count } = useSelector(state => state.counter);
  // 选择counter对应的模块
  const dispatch = useDispatch();
  return (
  	<button onCLick={() => dispatch(decrement(10))}>-10</button>
    <div>{count}</div>
    <button onCLick={() => dispatch(increment(20))}>+20</button>
  )
}

export default App;
相关推荐
前端大白话几秒前
震惊!90%前端工程师都踩过的坑!computed属性vs methods到底该怎么选?一文揭秘高效开发密码
前端·vue.js·设计模式
一天睡25小时几秒前
React与Vue表单的对比差异
前端·javascript
作曲家种太阳几秒前
第七章 响应式的 watch 实现【手摸手带你实现一个vue3】
前端
在澳门喝茶的芦竹2 分钟前
React高阶组件——React.momo
javascript·react.js
前端小巷子3 分钟前
深入解析 iframe
前端
WEI_Gaot3 分钟前
ES6 模板字符串
前端·javascript
前端大白话3 分钟前
前端工程师必看!手把手教你用CSS实现超丝滑的自适应视频嵌入
前端·css·前端框架
前端大白话3 分钟前
前端必看!figure标签在响应式图片排版中的王炸操作,grid/flex布局实战指南
前端·设计模式·html
前端大白话5 分钟前
深入理解 JavaScript 中 async 函数与 await 关键字的执行奥秘
前端·javascript·架构
袋鱼不重7 分钟前
Vue3中 watch 和 watchEffect 的区别
前端