react
关注
分享
扫一扫
请叫我大哥大
能用ctrl+c解决的请不要ctrl+x
展开
-
React中常见的TypeScript定义使用
React的内置类型React.ReactElement —— 使用React.createElement创建的，可以简单理解为React中的JSX的元素React.ReactNode —— <div>xxx</div> xxx的合法类型React.CSSProperties —— 组件内联的style对象的类型React.RefObject —— React.createRef创建的类型，只读不可改React.MutableRefObject —— useRef创建的.原创 2021-07-02 15:56:55 · 295 阅读 · 0 评论 -
组件通信05 -----ref
ref是react提供给我们的一个属性,通过它，我们可以访问 DOM 节点或者组件.父组件import React from 'react'import Son from './Son'class Parents extends React.Component { constructor(props) { super(props); // 创建ref this.son = React.createRef() } clearSo原创 2021-05-31 17:01:49 · 110 阅读 · 0 评论 -
组件通信04 -----onRef
通过 props 将子组件的组件实例（ this）当作参数，通过回调传到父组件，然后在父组件就可以拿到子组件的实例，就可以调用子组件中国的方法父组件import React from 'react'import Son from './Son'class Parents extends React.Component { sonRef = (ref) => { // 在这里拿到子组件的实例 this.child = ref } clearSonInput = (原创 2021-05-31 16:51:55 · 149 阅读 · 0 评论 -
组件通信03 -----context（祖孙通信）
一. content 适用于祖孙通信，多个组件通信context.jsimport React from 'react';// 创建Context 并且导出Consumer, Provideexport const {Consumer, Provider} = React.createContext(null);父组件import React, { Component } from 'react';import Son from "./Son";import {Provider} from原创 2021-05-31 16:42:27 · 76 阅读 · 0 评论 -
组件通信02 -----兄弟组件通信
react 兄弟通信案例：创建两个子组件Input 组件和List组件，Input组件是一个input框，List组件负责渲染，Input组件添加一个值在List组件进行渲染方法：通过redux进行通信（就不多说了…）通过对相同的父组件作为媒介，实现兄弟之间通信App.jsimport React from "react"import Input from "./components/Input"import List from "./components/List"expo原创 2021-05-31 16:39:06 · 137 阅读 · 0 评论 -
组件通信01 ----- props
一. props 适用于父子组件传值父组件 ===> 子组件父组件将需要传递的数据通过属性传值的方式（key:{xxxx}）的方式传递给子组件，子组件 通过this.props.key的方式获取参数。父组件：import React, { Component } from 'react';import Son from "./Son"class Parents extends Component { constructor(props) { sup原创 2021-05-31 16:22:59 · 183 阅读 · 0 评论 -
react withRouter
react withRouter作用：withRouter 可以加工一般组件，让一般组件具备路由组件特有的API，其返回值是一个新组件引入方式：import {withRouter} from "react-router-dom"案例：import React, { Component } from 'react';import {withRouter} from "react-router-dom"class Header extends Component { back = ()原创 2021-05-06 10:51:54 · 97 阅读 · 0 评论 -
react 路由传参
react 路由传参的四种方式一. search 传参（刷新后页面不会丢失，参数会在地址栏显示，如：http://localhost:3000/input/?id=01&=‘adc’）路由页面: <Route path="/demo/" component={Demo}></Route>路由跳转传递参数： <Link to={`/demo/?id=${this.state.demo.id}&=${this.state.demo.name}`}原创 2021-05-06 10:29:37 · 398 阅读 · 0 评论 -
react BrowserRouter和HashRouter的区别
BrowserRouter和HashRouter的区别底层原理不一样：BrowserRouter使用的是H5的history API，不兼容IE9以下版本。HishRouter使用的是url的哈希值。url表现形式不一样BrowserRouter的路径中没有#，例如：localhost:3000/demo/testHishRouter的路径包含#。例如localhost:3000/#/demo/test刷新后对路由state参数的影响BrowserRouter没有任何影响，因为state保原创 2021-05-06 09:21:11 · 92 阅读 · 0 评论 -
react hook
一. 什么是hook？官方解释：Hook 是一些可以让你在函数组件里“钩入” React state 及生命周期等特性的函数----Hook 不能在 class 组件中使用 —— 这使得你不使用 class 也能使用 React作用：Hook 使你在无需修改组件结构的情况下复用状态逻辑api1. useState（useState 就是一个 Hook ）import React, { useState } from "react";function Demo() { /*原创 2021-04-30 14:42:46 · 87 阅读 · 0 评论 -
react项目解决跨域
react 解决跨域首先用node构建一个服务a. 新建一个文件夹b. cd 到当前文件夹下c. npm init 一路回车d. 安装expressyarm add expresse. 创建一个server.js 文件f. 将以下代码放到server.js 中g. 用node server.js 启动代码：const express = require("express")const app = express()app.use((req, res, next)=>{原创 2021-04-24 21:23:37 · 252 阅读 · 0 评论 -
react-redux简单案例
react-redux 用法一. 配置环境，安装包全局安装 create-react-app 创建一个react项目npm i create-react-app -g创建一个项目npx create-react-app react-redux-demo安装reduxnpm i redux --save安装react-reduxnpm i react-redux二. 用法5. 首先在根文件index.js下引入 Provider ，因为只有 使组件层级中的 con原创 2021-04-21 11:19:08 · 301 阅读 · 0 评论 -
refs获取dom元素
refs获取dom元素的三种方式请勿过度使用 Refs ，字符串方式获取官方不推荐使用，低版本推荐使用回调形式的refs，React 16.3 版本后引入了 React.createRef()1.refs字符串的方式获取<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="I原创 2021-04-19 14:48:39 · 783 阅读 · 0 评论 -
React旧版本生命周期
React旧版本生命周期一. 组件挂载的生命周期执行顺序 * 由ReactDOM.render()触发 ---第一次渲染 * 1. constructor 构造器 * 2. componentWillMount 组件将要挂载 * 3. render * 4. componentDidMount 组件挂载完毕 二.组件正常更新的时候生命周期执行顺序 a） 由setState() 或 父组件 render() 调用 *原创 2021-04-19 09:43:17 · 78 阅读 · 0 评论 -
react新版本生命周期
react新版本生命周期 一. 初始化阶段 * 1. constructor * 2. getDerivedStateFromProps * 3. render * 4. componentDidMount 二 更新阶段 * 1. getDerivedStateFromProps * 2. shouldComponentUpdate * 3. render * 4. getSnapsHotBe原创 2021-04-19 09:46:17 · 130 阅读 · 0 评论