React
Double_路
学不可一蹴而就,坚持是胜利之光
展开
-
在React中,echarts点击事件中不能调用函数
在React中,echarts点击事件中不能调用函数那你是不是遇见了这样的问题,echarts的chart.on中想要调用一个函数一直显示not a function或者undefined,甚至更可恶的是连this.state的内容都拿不到后来弄了好久,发现改成箭头函数就可以了,基础不扎实,坑是天天跳不了解原因的去看看箭头函数和普通函数的this指向就可以了...原创 2022-03-21 17:43:53 · 1226 阅读 · 0 评论 -
绝对定位引起react的onClick失效
绝对定位引起react的onClick失效我从未想过有一天我会遇见这么奇葩的问题,一个点击事件两个小时前还好好的,突然怎么点击都没反应,后来原因让我想像不到按钮点击就是没反应,如果不是单词拼写问题,那肯定是其它属性影响了他,果不其然,删掉className后就正常了,那就肯定是它的问题我原来的className长这样改成这样就正常了:是因为点击的时候点击的是上面的一层(虽然我能看到我的按钮),按钮没有被点到,所以点击事件无效,解决方法就是将按钮放在最上面的那一层。...原创 2022-03-21 17:35:40 · 1608 阅读 · 0 评论 -
React基础知识总结
引入React:* CDN引入:要引入两个库,一个是react.development一个是react-dom.development* umd引入* webpack引入cjs和umd的区别:* cjs全称CommonJS,是Node.js支持的模块规范* umd是统一模块定义,兼容各种模块规范(含浏览器)* 理论上优先使用umd,同时支持Node.js和浏览器* 最新的模块规范是使用import和export关键字使用react:1. yarn global add create-re原创 2021-10-26 09:01:46 · 1093 阅读 · 0 评论 -
(五)、利用connect减少render
利用connect减少render情景:App中的setState会在只要一调用setState的时候就重新渲染App这个组件,但是里面的小儿子组件并没有发生任何的改变,但还是被重新渲染了,如果这样的组件积累很多个的时候也是非常浪费新能的,要是可以把setState移到外面就可以了import React, {useState,useContext,useEffect} from 'react';const connect = (Component) => { return (props)原创 2021-09-28 15:36:29 · 114 阅读 · 0 评论 -
(四)、connect的来历,自己封装connect
connect的来历,自己封装connectconnect就是使组件和全局状态连接起来,要点就是接收一个组件返回一个新的组件import React, {useState,useContext} from 'react';const appContext = React.createContext(null)export const App = () => { const [appState,setAppState] = useState({ user:{name:'lu',a原创 2021-09-28 14:47:21 · 76 阅读 · 0 评论 -
React的Hooks3——上下文useContext
React的Hooks3——上下文useContext上下文全局变量是全局的上下文上下文是局部的全局变量(Provider包着的地方可以访问)使用方法使用C = createContext(intial)创建上下文 使<C.Provider>圈定作用域在作用域内使用useContext©来使用上下文代码示例:const Context = createContext(null)function App(){ const [n,setN] = useState原创 2021-09-24 11:19:26 · 203 阅读 · 0 评论 -
React的Hooks2——useReducer
React的Hooks2——useReducer是用来规范创建state的创建流程的。文档中其实是这么说的:是useState 的替代方案。它接收一个形如 (state, action) => newState 的 reducer,并返回当前的 state 以及与其配套的 dispatch 方法。代码要分四步走:1. 创建初始值initialState2. 创建所有操作reducer(state,action)3. 传给useReducer,得到读和写API4. 调用写({type:"操原创 2021-09-24 10:15:53 · 128 阅读 · 0 评论 -
(三)、使用dispatch规范setState的流程
标题使用dispatch规范setState的流程自己实现dispatch:import React, {useState,useContext} from 'react';const appContext = React.createContext(null)export const App = () => { const [appState,setAppState] = useState({ user:{name:'lu',age:18} }) const cont原创 2021-09-23 17:47:15 · 442 阅读 · 0 评论 -
(二)、自己实现reducer
自己实现reducer并使用import React, {useState,useContext} from 'react';const appContext = React.createContext(null)export const App = () => { const [appState,setAppState] = useState({ user:{name:'lu',age:18} }) const contextValue = {appState,setA原创 2021-09-23 17:30:00 · 95 阅读 · 0 评论 -
(一)、使用useContext实现内容的读写state
使用useContext实现内容的读写stateimport React, {useState,useContext} from 'react';const appContext = React.createContext(null)export const App = () => { const [appState,setAppState] = useState({ user:{name:'lu',age:18} }) const contextValue = {app原创 2021-09-23 17:05:40 · 282 阅读 · 0 评论 -
React的Hooks1——状态useState
React的Hooks1——状态useState1. 使用状态const [n,setN] = React.useState(0)const [user,setUser] = React.useState({name:'F'})2. 注意事项不可局部更新如果state是一个对象,不能部分setState,因为setState不会帮我们合并属性useReducer也不会合并属性地址会发生改变: setState(obj)如果obj地址不变,那么React就认为数据没有变化可以使用…user将原创 2021-09-18 10:44:13 · 246 阅读 · 0 评论 -
useReducer代替Redux
useReducer代替Redux步骤:将数据几种在一个store对象将所有操作集中在reducer创建一个Context创建对数据的读写API将第四步的内容放到第三步的Context用Context.Provider将Context提供给所有组件各个组件用useContext获取读写API代码实例:import React, { createContext,useReducer,useContext,useEffect } from 'react';import ReactDOM原创 2021-09-15 11:34:05 · 167 阅读 · 0 评论