react
文章平均质量分 54
麦子的小库存
这个作者很懒,什么都没留下…
展开
-
react小笔记
一、请说一下你对React的理解1、React是一个用于构建用户界面的 JavaScript 库2、可以通过组件化的方式构建 构建快速响应的大型Web应用程序3、 特点:声明式、组件化二、为什么React会引入JSX1、JSX是一个JavaScript的语法扩展,JSX 可以很好地描述 UI 应该呈现出它应有交互的本质形式2、JSX其实是React.createElement的语法糖三、请说一下你对Virtual DOM的理解React.createElement 函数所返回原创 2022-01-11 18:24:53 · 298 阅读 · 0 评论 -
React-Hooks
一、useState:保存状态1、useState接收一个初始状态或者计算函数,这个函数返回初始状态2、每次更新状态,子组件都会自动执行,不管它有没有依赖此状态,这里只是会执行函数式组件和class组件的render函数和useEffect,并不会重新渲染dom节点3、如果新的state依赖以前的state,则可以给setState传递一个函数,这个函数的参数是旧的state,返回新的state4、如果新的state和旧的state一致,则不会去重新渲染,子组件也不会重新渲染,也不会去执行父原创 2021-12-07 23:53:58 · 236 阅读 · 0 评论 -
React父子组件的渲染执行顺序
import React, { useEffect, useState } from 'react';import './App.css';function A() { console.log('子组件'); useEffect(() => { console.log('子组件useEffect') }) return <div>zheshi</div>}function App() { const [count, setCount] .原创 2021-12-07 23:29:28 · 968 阅读 · 0 评论 -
自定义React-Hooks
一、React Hooks1、Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性二、Hooks 优点1、可以抽离公共方法和逻辑,提高代码的可复用性2、函数式组件更简洁,开发效率更高三、自定义 Hook1、通过自定义 Hook,可以将组件逻辑提取到可重用的函数中2、自定义 Hook 是一个函数,其名称以use开头,函数内部可以调用其他的Hook3、初始化项目create-reac...原创 2021-12-07 11:52:37 · 1266 阅读 · 0 评论 -
React-Redux
一、Redux应用场景1、随着 JavaScript 单页应用开发日趋复杂,管理不断变化的 state 非常困难2、Redux的出现就是为了解决state里的数据问题3、在React中,数据在组件中是单向流动的4、数据从一个方向父组件流向子组件(通过props),由于这个特征,两个非父子关系的组件(或者称作兄弟组件)之间的通信就比较麻烦二、Redux设计思想1、Redux是将整个应用状态存储到到一个地方,称为store2、里面保存一棵状态树state tree3、组件可.原创 2021-12-06 12:04:45 · 796 阅读 · 0 评论 -
React-SSR
一、自己写的demoreact-ssr二、什么是服务器端渲染1、服务器端渲染:页面上的内容是由服务器生产的cnpm i express -Slet express=require('express');let app=express();app.get('/',(req,res) => { res.send(` <html> <body> <div id="root">h原创 2021-12-05 21:24:26 · 444 阅读 · 0 评论 -
React如何查看源码
一、进入官网:https://github.com/facebook/react二、源码都在 packages 文件里:https://github.com/facebook/react/tree/master/packages三、可以将文件下载到本地,这样看起来会方便点四、然后进入 pageages/react/index.js 文件里,这个文件就是react源码的入口五、这个网址可以将react代码展示为通过babel转换的代码:https://react.docschina.org/原创 2020-11-17 14:44:31 · 1767 阅读 · 0 评论 -
React 系统中,在离开编辑页面前做提示
import React from, { useEffect } from 'react';import { Prompt } from 'react-router-dom'export const EditPrompt = (() => { const listener = (e) => { e.preventDefault(); e.returnValue = '离开当前页后,所编辑的数据将不可恢复' } useEffect(.转载 2020-09-25 17:22:30 · 1424 阅读 · 0 评论 -
React移动端Radio组件
一、组件如图所示:二、使用方法:import Radios from '../../components/Radio/index';import './index.less';const Template = () => { const [value, setValue] = useState(1); const onChange = value => { console.log(value); setValue(value); }; cons原创 2020-05-12 14:46:54 · 737 阅读 · 0 评论 -
React-router之路由跳转导致store中的数据重置
一、遇到问题的原因: 项目中React-router都是一级路由,当路由跳转的时候那个组件会被卸载掉,当返回那个组件的时候组件是重新构建的,componentdidmount会重置store中的数据,但是又不能用嵌套路由,嵌套路由会把路由到的所有组件都渲染出来。如果把加载store的函数放到父级组件的时候,当在本页面刷新浏览器的时候会找不到数据而报错。二、解决办法:...原创 2020-03-03 17:37:02 · 1868 阅读 · 3 评论 -
React-intl使用记录
使用 react-intl 实现 React 组件国际化一、首先在项目中安装react-intl:npm install react-intl --save二、然后在项目最外层的app.jsx文件中添加以下内容:// 多语言import {ConfigProvider, message} from 'antd';import {IntlProvider, addLocaleD...原创 2019-12-25 16:12:24 · 1164 阅读 · 0 评论 -
React-ref(2)
一、重新设置键盘焦点到指定按钮上:// 我们先在一个 class 组件的 JSX 中创建一个元素的 ref:class CustomTextInput extends React.Component { constructor(props) { super(props); // 创造一个 textInput DOM 元素的 ref this.textInput ...转载 2019-11-11 10:02:53 · 132 阅读 · 0 评论 -
React-ref
import React, { Component } from "react";import ReactDOM from 'react-dom';class Child extends Component { render() { return <p ref='ppp'>hhh</p> }}class HocPage extends Comp...原创 2019-10-30 17:47:50 · 90 阅读 · 0 评论 -
React-常见优化技术
一、使用shouldComponentUpdate返回false,则页面不进行渲染,返回true,页面才进行渲染二、class组件使用PureComponent(注意PureComponent是浅比较)三、function组件使用memo(注意memo也是浅比较)...原创 2019-10-22 15:19:39 · 186 阅读 · 0 评论 -
React-Protal(传送门)
import React, { Component } from 'react';import { createPortal } from 'react-dom';export default class Dialog extends Component { constructor(props) { super(props); const doc =...原创 2019-10-22 15:14:34 · 586 阅读 · 0 评论 -
React-useReducer简单使用
一、Fruit.jsimport React, { useState } from 'react';export function FruitList({ fruits, onSetFruits }) { const del = delIndex => { const tem = [...fruit]; tem.splice(delIndex...原创 2019-10-21 23:05:23 · 1518 阅读 · 0 评论 -
React-高阶组件简单使用
import React from 'react';function Child(props){ return <div>Child</div>}const foo = Cmp => props => { return <Cmp {...props}/>}const foo = Cmp => { ret...原创 2019-10-21 19:58:39 · 159 阅读 · 0 评论 -
React-简单的复合组件
import React from 'react';function Card(props){ return ( <div className='card'> {props.children} </div> )}function FormButton(props){ const {d...原创 2019-10-21 19:50:36 · 142 阅读 · 0 评论 -
React-Context使用
一、AppContext.jsimport React, { Component } from 'react';export const Context = React.CreateContext();export const Provider = Context.Provider;export const Consumer = Context.CConsumer;二、App.j...原创 2019-10-21 19:23:14 · 151 阅读 · 0 评论 -
React-简单hooks使用
import React, { useState, useEffect } from 'react';export default function User(){ const [date, setDate] = useState(new Date()); useEffect(() => { const timeId = setInterval(() =&...原创 2019-10-21 17:21:01 · 195 阅读 · 0 评论 -
React-生命周期
一、React V16.3之前的生命周期二、React V16.4之后的生命周期React V17可能会废弃的三个生命周期:(1)componentWillMount(2)componentWillUpdate(3)componentWillReviceProps目前如果使用的话在前面加上UNSAFE_引入两个新的生命周期:(1)static getDerivedStateFor...原创 2019-10-16 20:23:44 · 187 阅读 · 0 评论 -
React-state同步更新方式
React中一般情况下state是异步更新的,在合成事件和生命周期中一般是异步更新的,它会将几次更新状态合并在一起更新。React同步更新方法:一、使用回调函数:this.setState((prevState, props) => ({ count: prevState.count + 1})); 二、使用计时器:setTimeout(() => { th...原创 2019-10-16 19:48:35 · 1857 阅读 · 0 评论 -
React-setState何时同步更新状态
其实setState也可以同步更新this.state的,我研究了一下,真的耶!有些情况下setState真的可以同步更新this.state耶!官方文档对setState这种同步行为语焉不详,所以只能去看源代码,港真,我真的不想去看React的源代码,但是遇到这种事也没有更好的办法,毕竟,开源软件的好处不就是可以去看源代码嘛。先直接说结论:在React中,如果是由React引发的事件...转载 2019-09-23 16:09:46 · 907 阅读 · 0 评论 -
React-setState为什么不会同步更新组件状态
让我们反过来想,假如setState改成是同步更新状态,那么React会是怎样一副模样。假设,我们现在有机会来对React做一个重大设计调整,把setState的功能设定为同步更改this.state,也就是说,当setState函数返回的时候,this.state已经体现了状态的改变。那就有两个设计的问题就直接摆在我们面前。setState更新状态之后要不要触发一次更新过程?...转载 2019-09-23 16:08:06 · 2578 阅读 · 1 评论 -
React-setState:这个API设计到底怎么样
一、setState的关键点:setState不会立刻改变React组件中state的值; setState通过引发一次组件的更新过程来引发重新绘制; 多次setState函数调用产生的效果会合并。二、state的简单用法://读取状态const count = this.state.count;//更新状态this.setState({count: count + 1})...转载 2019-09-23 16:04:41 · 166 阅读 · 0 评论 -
React-强制刷新(获取render后的内容)
React-强制刷新(获取render后的内容)setState 是不保证同步的,如果需要在 setState 后直接获取修改后的值,可以:使用setTimeoutcomponentWillReceiveProps(nextProps, nextContext) { this.setState({ caseDetail: nextProps.caseDetail ...原创 2019-05-31 14:44:35 · 10106 阅读 · 0 评论 -
react-native-样式
一、样式的添加方式:1.直接写入:&amp;amp;amp;lt;View style={{ width:200, height:200, backgroundColor:&amp;amp;quot;#ff6600&amp;amp;quot;}}&amp;amp;amp;gt;&amp;amp;amp;lt;/View&amp;amp;amp;gt;2.引用变量:原创 2018-12-11 17:22:54 · 256 阅读 · 0 评论