React
关注
分享
扫一扫
React相关知识
愚公搬代码
《头衔》：华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
《近期荣誉》：2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主，2024年华为云十佳博主等。
《博客内容》：.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
展开
-
(精华)2020年7月31日 React 手写ssr服务端渲染
共用部分 import React ,{useState} from 'react' import {connect} from 'react-redux' import {getIndexList} from '../store/index' const Index = (props) => { let [count,setCount] = useState(1) return ( <div> <h1>服务端渲染<原创 2020-07-31 23:37:33 · 543663 阅读 · 1 评论 -
(精华)2020年7月31日 React 虚拟dom的渲染机制和性能调优
//-------------------------1----------------------------- function Table ({rows}) { return ( <table> { rows.map(row=>( <tr> <t原创 2020-07-31 00:37:07 · 546047 阅读 · 1 评论 -
(精华)2020年7月31日 React setstate原理详解
// partialState 部分state ReactComponent.prototype.setState = function (partialState, callback) { invariant( typeof partialState === 'object' || typeof partialState === 'function' || partialState == null, 'setState(...): takes an object of.原创 2020-07-31 00:19:44 · 546121 阅读 · 1 评论 -
(精华)2020年7月29日 React react-hooks的useReducer的使用
import React , {useReducer} from 'react' // (state,action)=>newState const UseReducer = ()=>{ const reducer = (state,action) =>{ if(action.type === 'add'){ return { ...state, count:state.coun原创 2020-07-29 00:02:03 · 551341 阅读 · 1 评论 -
(精华)2020年7月29日 React react-hooks的useEffect的使用
import React , {useEffect,useState} from 'react' const UseEffect = ()=>{ const [loading,setLoading] = useState(true) useEffect(()=>{ setTimeout(()=>{ setLoading(false) },2000) }) return ( loadin原创 2020-07-29 00:01:19 · 551425 阅读 · 1 评论 -
(精华)2020年7月28日 React react-hooks的useContext用法
import React , {useState} from 'react' const addCon = ()=>{ console.log(useState(0)); const [count,setCount] = useState(0) const handelAdd = () =>{ let newCount = count; setCount(newCount+=1) } return (原创 2020-07-28 23:49:41 · 551873 阅读 · 2 评论 -
(精华)2020年7月28日 React react-hooks的useState用法
import React , {useState} from 'react' const addCon = ()=>{ console.log(useState(0)); const [count,setCount] = useState(0) const handelAdd = () =>{ let newCount = count; setCount(newCount+=1) } return (原创 2020-07-28 23:48:54 · 551476 阅读 · 3 评论 -
(精华)2020年7月28日 React redux的使用
action-type.js export const INCREMENT = 'increment' export const DECREMENT = 'decrement' actions.js import {INCREMENT,DECREMENT} from './action-type' export const increment = number => ({type:INCREMENT,number}) export const decrement = number => ({t原创 2020-07-28 23:24:45 · 551619 阅读 · 1 评论 -
(精华)2020年7月31日 React 非父子组件传参
新版：跨级传参最主要是避免每层赋值，也避免用到dva import React from 'react' const {Provider,Consumer} = React.createContext('default') export default class ContextDemo extends React.Component { state={ newContext:'createContext' } render() { const {newCon原创 2020-07-26 23:12:06 · 555790 阅读 · 1 评论 -
(精华)2020年7月26日 React ref的三种方式
import React from 'react' export default class RefDemo extends React.Component { constructor() { super() this.objRef = React.createRef()//第一种 // { current: null } } componentDidMount() { // console.log(`span1: ${this.refs.ref1.text原创 2020-07-26 23:06:54 · 555092 阅读 · 2 评论 -
(精华)2020年7月26日 React react-router-dom的基本使用
import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import * as serviceWorker from './serviceWorker'; import {HashRouter,BrowserRouter} from 'react-router-dom' ReactDOM.render( <BrowserRouter&原创 2020-07-26 23:03:56 · 555841 阅读 · 1 评论 -
(精华)2020年7月26日 React pwa的配置
在到webpack配置文件中添加插件 const WorkboxWebpackPlugin = require('workbox-webpack-plugin') plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }), new WorkboxWebpackPlugin.GenerateSW({ clientsClaim:true,原创 2020-07-26 22:48:42 · 557579 阅读 · 1 评论 -
(精华)2020年7月26日 React 组件的生命周期
import React from 'react'; import logo from './logo.svg'; import './App.css'; class App extends React.Component{ constructor(props){ super(props) this.state = { msg:'第一次的消息' } } componentWillMount(){ console.log(this.state.msg);原创 2020-07-26 22:45:54 · 555658 阅读 · 2 评论 -
(精华)2020年7月26日 React Todolist的实现
app.js import React from 'react' import TodoMain from './components/TodoMain'; import TodoHeader from './components/TodoHeader'; import TodoFooter from './components/TodoFooter'; class App extends React.Component{ constructor(props){ super(props)原创 2020-07-26 19:54:35 · 555354 阅读 · 1 评论 -
(精华)2020年7月26日 React 父组件和子组件相互传值
html原型 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单组件</title> </head> <body> <div id原创 2020-07-26 10:37:34 · 555525 阅读 · 1 评论 -
(精华)2020年7月26日 React this的指向问题
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>this</title> </head> <body> <div id="app原创 2020-07-26 10:31:52 · 555315 阅读 · 0 评论 -
(精华)2020年7月26日 React 组件的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>简单组件</title> </head> <body> <div id="app原创 2020-07-26 10:22:17 · 555599 阅读 · 1 评论 -
(精华)2020年7月26日 React html中使用react
基本使用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>hello</title> </head> <body> <div i原创 2020-07-26 10:13:41 · 555470 阅读 · 0 评论