关注
分享
react的一些基础知识
2b勿扰
专注技术的研究
展开
-
(精华2020年5月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-05-31 07:30:10 · 15925 阅读 · 0 评论 -
(精华2020年5月28日更新) react基础篇 虚拟dom的渲染机制和性能调优
下面几种写法等同//-------------------------1----------------------------- function Table ({rows}) { return ( <table> { rows.map(row=>( <tr>原创 2020-05-28 23:00:37 · 14794 阅读 · 0 评论 -
(精华2020年5月27日更新) react基础篇 setstate原理详解
先上张图代码// partialState 部分stateReactComponent.prototype.setState = function (partialState, callback) { invariant( typeof partialState === 'object' || typeof partialState === 'function' || partialState == null, 'setState(...): takes an o原创 2020-05-27 23:38:26 · 14937 阅读 · 0 评论 -
(精华2020年5月27日更新) react基础篇 react-hooks的useReducer的使用
import React , {useReducer} from 'react'// (state,action)=>newStateconst UseReducer = ()=>{ const reducer = (state,action) =>{ if(action.type === 'add'){ return { ...state, count:state.coun原创 2020-05-27 23:10:07 · 14819 阅读 · 0 评论 -
(精华2020年5月27日更新) 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-05-27 23:07:34 · 15595 阅读 · 0 评论 -
(精华2020年5月25日更新) react基础篇 react-hooks的useContext用法
import React , {useContext} from 'react'const UseContext = ()=>{ const UseContextCon = React.createContext({}) const Son = () =>{ const {name} = useContext(UseContextCon) return ( <p>我是son组件 我的名字是{nam原创 2020-05-25 00:12:50 · 15159 阅读 · 0 评论 -
(精华2020年5月25日更新) 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-05-25 00:11:30 · 15670 阅读 · 0 评论 -
(精华2020年5月24日更新) react基础篇 redux的使用和react-redux的使用
redux的核心apicreateStore()创建包含指定reducer的store对象store对象redux库最核心的管理对象内部维护着 state reducer对象核心方法getState()dispatch(action)subscriberedux的三个核心概念action标识要执行行为的对象包含两个方面的属性type 标识属性 值是字符串 唯一 必要的属性xxx 数据属性 值类型是任意的 可选属性const action ..原创 2020-05-24 19:48:05 · 15823 阅读 · 1 评论 -
(精华2020年5月24日更新) react基础篇 父组件到孙组件跨级传参
新版：跨级传参最主要是避免每层赋值，也避免用到dvaimport React from 'react'const {Provider,Consumer} = React.createContext('default')export default class ContextDemo extends React.Component { state={ newContext:'createContext' } render() { const {newCon原创 2020-05-24 11:48:22 · 15674 阅读 · 0 评论 -
(精华2020年5月24日更新) 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-05-24 11:39:28 · 14935 阅读 · 0 评论 -
(精华2020年5月24日更新) react基础篇 react-router-dom的基本使用
首先安装 npm i react-router-dom到index.js中加入如下代码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-route原创 2020-05-24 10:11:05 · 15079 阅读 · 0 评论 -
(精华2020年5月24日更新) react基础篇 pwa的配置
首先npm i workbox-webpack-plugin在到webpack配置文件中添加插件const WorkboxWebpackPlugin = require('workbox-webpack-plugin')plugins: [ new MiniCssExtractPlugin({ filename: '[name].css' }), new WorkboxWebpackPlugin.GenerateSW({原创 2020-05-24 08:41:36 · 17549 阅读 · 0 评论 -
(精华2020年5月24日更新) 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-05-24 00:41:25 · 15061 阅读 · 0 评论 -
(精华2020年5月24日更新) react基础篇 脚手架配置详解
原创 2020-05-24 00:27:12 · 15709 阅读 · 0 评论 -
(精华2020年5月23日更新) react基础篇 脚手架版todolist的实现
app.jsimport 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-05-23 00:19:34 · 14923 阅读 · 0 评论 -
(精华2020年5月23日更新) react基础篇 html版 todolist的实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>todoList</title></head><body> <div id=原创 2020-05-22 23:04:01 · 15518 阅读 · 0 评论 -
(精华2020年5月22日更新) react基础篇 父组件传值到子组件prop的使用
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>prop</title></head><body> <div id="app"&原创 2020-05-22 22:50:16 · 14774 阅读 · 0 评论 -
(精华2020年5月22日更新) 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-05-22 22:41:07 · 15375 阅读 · 0 评论 -
(精华2020年5月22日更新) 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-05-22 22:40:15 · 14835 阅读 · 0 评论 -
(精华2020年5月22日更新) 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 id="ap原创 2020-05-22 22:18:56 · 15579 阅读 · 0 评论