![](https://img-blog.csdnimg.cn/20201014180756757.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react实战笔记
tianzebeibei
这个作者很懒,什么都没留下…
展开
-
react-redux
Getting Started with React Redux | React Redux1.安装# If you use npm:npm install react-redux# Or if you use Yarn:yarn add react-reduxcnpm i @types/react-redux -D2.引用 index.tsximport { Provider } from "react-redux";import store from "./redux/原创 2022-04-21 22:15:37 · 83 阅读 · 0 评论 -
react i18n国际化配置
i18n原创 2022-04-21 21:35:26 · 340 阅读 · 0 评论 -
react-router link
import React from "react";import { Image, Typography } from "antd";import { withRouter, RouteComponentProps, Link } from "react-router-dom";interface PropsType extends RouteComponentProps { id: string | number; size: "large" | "small"; imageSrc:.原创 2022-04-21 17:21:35 · 392 阅读 · 0 评论 -
react-router 路由之间数据的传递
1.withRouter(高阶组件HOC)import { withRouter, RouteComponentProps } from "react-router-dom";props继承RouteComponentPropsinterface PropsType extends RouteComponentProps { id: string | number; size: "large" | "small"; imageSrc: string; price: numb.原创 2022-04-21 17:16:02 · 620 阅读 · 0 评论 -
react-router - 在url中添加参数
使用?来引导参数 分段路由segments第二种 <Route path="/detail/:touristRouteId" component={DetailPage} />import React from "react";import { RouteComponentProps } from "react-router-dom";interface MatchParams { touristRouteId: string;}export const Deta原创 2022-04-21 17:01:00 · 1157 阅读 · 0 评论 -
react-router使用入门
1.安装cnpm i react-router-dom -Scnpm i @types/react-router-dom -D2.使用BrowserRouter +Switch +Routeimport React from 'react';import styles from "./App.module.css";import { BrowserRouter, Route, Switch } from "react-router-dom";import { HomePage ...原创 2022-04-21 16:42:43 · 445 阅读 · 0 评论 -
自定义Hook案例
1.AddToCart.tsximport React, { useContext } from "react";import { appSetStateContext } from "../AppState";import { RobotProps } from "./Robot";export const useAddToCart = () => { const setState = useContext(appSetStateContext) const addTo原创 2022-04-21 11:24:41 · 57 阅读 · 0 评论 -
高阶组件-1
react17原创 2022-04-21 11:17:08 · 119 阅读 · 0 评论 -
useContext使用
react17原创 2022-04-21 10:58:06 · 760 阅读 · 0 评论 -
useEffect使用总结
react17原创 2022-04-21 10:06:24 · 100 阅读 · 0 评论 -
配置react的css模组
react17系统精讲笔记原创 2022-04-20 22:31:09 · 296 阅读 · 0 评论 -
3.react生命周期及其使用场景
State & 生命周期 – React1.constructor用于初始化内部状态,很少使用 唯一可以直接修改state的地方2.getDerivedStateFromProps 16.3引入当state需要从props初始化时使用 尽量不要使用:维护两者状态一致性会增加复杂度 每次render都会调用 典型场景:表单控件获取默认值3.componentDidMountUI渲染完成后调用 只执行一次 典型场景:获取外部资源4.componentWillUnmou.原创 2022-04-14 11:54:00 · 296 阅读 · 0 评论 -
2.关于jsx
JSX 简介 – Reactjsx的本质:使用react.createElementjsx 可以使用大括号,来在属性值中插入一个 JavaScript 表达式:const element = <img src={user.avatarUrl}></img>;vue {{}}jsx 传入一组属性 延展属性const props = {firstName:'Ben',lastName:'hector'}const greeting = <Greetin原创 2022-04-14 11:18:33 · 620 阅读 · 0 评论 -
1.react组件入门
react组件一般不提供方法,而是某种状态机 React组件可以理解为纯函数 单向数据绑定组件类型:受控组件 表单元素的状态由使用者维护 < input type = "text"value = { this.StaticRange.value}onChange = { evt => { this.setState({ value: evt.target.value }) }} > < /input> 非原创 2022-04-14 11:02:38 · 638 阅读 · 0 评论