react
码林鼠
致力于知识的传播
展开
-
useRef和createRef的区别
function App() { const [num, setNum] = useState(0) const uRef = useRef() const cRef = createRef() const btnClk = () => { setNum((num) => num + 1) } useEffect(() => { uRef.current.value = num cRef.current.value = num con原创 2021-08-18 22:28:18 · 1748 阅读 · 0 评论 -
react ref获取子组件中的input元素
function App(){ const myref = React.createRef() const Comp = React.forwardRef((props, ref) => (<div> <input ref={ref}/> </div>)) useEffect(() => { console.log(myref.current.value = 'malinshu') }, []) return(原创 2021-07-28 15:00:52 · 328 阅读 · 0 评论 -
react-router-dom的基本使用
one和two是子路由import { BrowserRouter as Router, Switch, Route, Link, Redirect} from "react-router-dom";<Router> <ul> <li> <Link to="/">Home</Link> </li> <li> .原创 2021-07-06 17:53:59 · 141 阅读 · 0 评论 -
react hook useCallback的使用
首先探索下useCallback是什么const callback = useCallback(() => { console.log('依赖只有count') }, [count]); <button onClick={() => console.log(callback)}> what is callback</button>当点击按钮的时候,控制台打印了一下内容由此看出,常量callback的值就是一个函数,函数里面的代码就是我们写在u.原创 2021-07-03 21:22:09 · 693 阅读 · 1 评论 -
react useContext跨层级组件传值
父组件import ContextComp,{TestContext} from './components/ContextComp'function App(){ const showName = (name) => { console.log(name) } const ItemComp = () => { const {name} = React.useContext(TestContext) return <div onClick={().原创 2021-06-21 17:49:43 · 416 阅读 · 3 评论 -
async await等待的是不是promise的区别
场景一const waitForYou = () => { return new Promise((resolve,reject)=>{ resolve(1) }) } const trigger = async () => { let res = await waitForYou() console.log('执行了吗', res) } return ( <div className="App">原创 2021-06-20 11:00:23 · 781 阅读 · 0 评论 -
mobx computed
场景一@observable person = { name:'malinshu', high:180}@action setName = (value) => { this.person.name = value}@computed get getHigh(){ let {high} = this.person console.log(high) return high}<input onChange={(e) => { m原创 2021-06-20 10:45:56 · 667 阅读 · 0 评论 -
react函数组件的生命周期
import { useEffect } from 'react'function FunComponent() { useEffect(()=>{ return ()=>{ console.log("WillUnmount") } }) useEffect(()=>{ console.log("DidMount") },[]) return ( <d原创 2021-05-09 18:13:43 · 5056 阅读 · 0 评论 -
TypeError: Cannot read property ‘location‘ of undefined react-router-dom报错
import {Route, BrowserRouter, Link} from ‘react-router-dom’<BrowserRouter> <Link to='/fun'>fun</Link> <Link to='/import'>import</Link> <Route path="/fun" component={FunComponent}/>原创 2021-05-09 17:56:32 · 620 阅读 · 0 评论 -
react中useState的使用
import { useState } from 'react'function FunComponent() { const [man, setMan] = useState({ name: 'malinshu', tall: 180 }) const setName1 = () => { setMan({ name: 'ma' }) console.log(man)//{name: "malinshu", tall: 180}页面更新成了{ nam原创 2021-05-09 16:55:34 · 1165 阅读 · 0 评论 -
mobx在react中引用的几种方式
先看效果,类似于vue的双向绑定方式一(inject方式):import {Provider} from 'mobx-react'import mobxStore from './store/testStore'import ByInject from './components/byInject'function App() { return ( <div className="App"> <Provider receiverStore={mobxSt原创 2021-05-09 00:13:21 · 849 阅读 · 2 评论 -
redux的基本应用
刚开始学的时候被绕晕了,原来redux就是:store由reducer创建而成,通过store.disptch(action),然后由action来决定执行reducer里的哪些代码,从而得到新的结果结论:第一,store分发action;第二:action决定store的结果reducer.jsvar obj = [ { name: 'malinshu', age: 18 }]...原创 2020-04-11 00:33:18 · 131 阅读 · 0 评论 -
react知识
react-dom是用于web网页开发的,react-native是用于app开发的<>//唯一根元素可以用空标签 <div>hello</div> <div>world</div></>import React,{Fragment} from 'react'<Fragment>//也可以用...原创 2020-04-09 23:40:35 · 107 阅读 · 0 评论 -
create-react-app绝对路径的配置
网上找了很多绝对路径的配置方法,但我尝试了,都不行,最后还是研究出来了用create-react-app脚手架创建的项目,怎么配置绝对路径呢?在node_module中找到react-scripts,打开webpack.config.js全局搜索alias加上这行代码,’@’:path.resolve(‘src’)重新npm start启动项目,就可以使用绝对路径了,如下:...原创 2020-04-08 12:18:38 · 3295 阅读 · 3 评论