坚持原创

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

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(

one和two是子路由 import { BrowserRouter as Router, Switch, Route, Link, Redirect } from "react-router-dom"; <Router> <ul> <li> <Link to="/">Home</Link> </li> <li> .

首先探索下useCallback是什么 const callback = useCallback(() => { console.log('依赖只有count') }, [count]); <button onClick={() => console.log(callback)}> what is callback</button> 当点击按钮的时候，控制台打印了一下内容 由此看出，常量callback的值就是一个函数，函数里面的代码就是我们写在u.

父组件 import ContextComp,{TestContext} from './components/ContextComp' function App(){ const showName = (name) => { console.log(name) } const ItemComp = () => { const {name} = React.useContext(TestContext) return <div onClick={().

场景一 const waitForYou = () => { return new Promise((resolve,reject)=>{ resolve(1) }) } const trigger = async () => { let res = await waitForYou() console.log('执行了吗', res) } return ( <div className="App">

场景一 @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

import { useEffect } from 'react' function FunComponent() { useEffect(()=>{ return ()=>{ console.log("WillUnmount") } }) useEffect(()=>{ console.log("DidMount") },[]) return ( <d

import {Route, BrowserRouter, Link} from ‘react-router-dom’ <BrowserRouter> <Link to='/fun'>fun</Link> <Link to='/import'>import</Link> <Route path="/fun" component={FunComponent}/>

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

先看效果，类似于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

刚开始学的时候被绕晕了，原来redux就是：store由reducer创建而成，通过store.disptch(action),然后由action来决定执行reducer里的哪些代码，从而得到新的结果 结论：第一，store分发action；第二：action决定store的结果 reducer.js var obj = [ { name: 'malinshu', age: 18 } ] ...

react-dom是用于web网页开发的，react-native是用于app开发的 <>//唯一根元素可以用空标签 <div>hello</div> <div>world</div> </> import React,{Fragment} from 'react' <Fragment>//也可以用...

网上找了很多绝对路径的配置方法，但我尝试了，都不行，最后还是研究出来了 用create-react-app脚手架创建的项目，怎么配置绝对路径呢？ 在node_module中找到react-scripts,打开webpack.config.js 全局搜索alias 加上这行代码，’@’:path.resolve(‘src’) 重新npm start启动项目，就可以使用绝对路径了，如下： ...