根据vue学习react

react的函数式组件与vue2是很像的

一、基础类似点

        1、组件下拥有一个根节点,vue2是template,react是幽灵标签<>

        2、vue2是{{}}以及v-model,react的绑定是{}

        3、vue2编译html是v-html,react是{},并且react的jsx中可以直接写标签,不需要学“”

        4、vue2中遍历无用标签包裹一般就自己写,但是react幽灵标签不能使用key遍历,这个时候可以使用Fragment、

二、方法类似点

        1、点击vue2是@click,react是onClick={}  也是这样的方式

        2、vue2的双向绑定是直接的,vue3需要用ref,reactive,react用useState,跟vue3很像

        3、(// 这一部分比较麻烦)useState中赋值复杂对象使用set,set(...data, 新参数), 数组操作也需要这样,所以react中用push,slice这些方法非常少,它的方式更类似于微信小程序的setData,data后续是我们需要的值

三、react Hook组件通信学习

        1、dom组件,文件引入可以import,但是class必须写className,style需要写style={{width: 100}},比较长的属性依旧还是写驼峰,也可以直接写对象,定义一个样式styleObject,style={styleObject},展开语法,标签中依旧可以使用{...styleObject}

        2、组件传值的props,通信

function Article({title, content, active}) {
  return (
    <>
      <h4>{title}</h4>
      <div>{content}</div>
      <p>状态:{active? '显示': '隐藏'}</p>
    </>
  )
}

function App() {

  return (
    <> 
      <Article title="标题1" content="内容1"></Article>
      <Article title="标题2" content="内容2"></Article>
    </>
  );
}

        3、插槽概念,jsx的值,可以直接接收jsx作为children,不需要想vue2写slot插槽

function List({children}) {
  return (
    <ul>
      {children}
    </ul>
  )
}

function App() {

  return (
    <> 
      <List>
        <li>124</li>
        <li>125</li>
      </List>
    </>
  );
}

        4、 子组件往父组件传值,react也可以style使用三元表达式,返回值这里会可能存在异步的问题,建议用一个参数去保存改变后的内容,然后再向前传递

function Detail({onActive}) {
  const [status, setStatus] = useState(false)
  function click() {
    Promise.resolve().then(()=> {
      setStatus(status => !status)
      onActive(!status)
    })
  }
  return (
    <>
      <button onClick={click}>按钮-{status+''}</button>
      <div style={{display: status? 'block': 'none'}}>154235235</div>
    </>
  )
}



function App() {

  return (
    <> 
      <Detail onActive={handleActive}></Detail>
    </>
  )
}

        5、context钩子使用方式

                使用React.createContext("")进行定义

                <nameContext.Provider value={"ys"}>表明下级子组件可以使用这个值

                <nameContext.Consumer>子组件可以直接使用name访问

//组件A
import React from "react";
import B from "./B";
​
export const nameContext = React.createContext("");
export default function App() {
  return (
    <nameContext.Provider value={"ys"}>
      大家好,
      <B />
    </nameContext.Provider>
  );
}

//组件B
import C from "./C";
​
export default function B() {
  return (
    <>
      我是今天的分享者,
      <C />
    </>
  );
}

//组件C
import React from "react";
import { nameContext } from "./App";
​
export default function C() {
  return (
    <nameContext.Consumer>
      {(name) => <span>我叫{name}</span>}
    </nameContext.Consumer>
  );
}

链接:https://juejin.cn/post/7028160551079395365

           6、useContext可以不需要写标签,直接获取

                    const name = useContext(nameContext)

四、react的其他钩子函数

        1、const [state, dispatch] = useReducer(管理方法,参数),状态管理机制,state是值,dispatch是操作。

        2、useRef() 存储值,不会响应式,const a = useRef(),a.current = 1,很像是拷贝,react中也有ref的参数,可以与useRef进行dom绑定以及访问,同样父组件可以通过useImperativeHandle调用子组件方法

const Child = forwardRef(function (props, ref) {
  useImperativeHandle(ref, () => ({
    // 暴露出去的方法
    myFn: () => {
      console.log("子组件的方法")
    }
  }))

  return (
    <div>子组件</div>
  )
})

function App() {
  const child = useRef()

  function handleActive() {
    child.current.myFn()
  }

  return (
    <> 
      <Child ref={child}/>
    </>
)
}

        3、useEffect副作用钩子,默认会执行几次,相当于vue的watch,但是他是默认监听全部,所以需要设置监听的内容

        useMemo进行缓存计算结果,相当于vue的compute,计算属性

        4、useCallBack(依赖函数,依赖数组), memo记忆组件

  

五、CodeGeeX

        1、提问函数如何使用

        2、帮你解释代码

        3、帮你注释

        4、帮你解决代码上的bug问题

        5、帮你做代码上的测试

六、router里面内容是一样的

        常见的router.jsx,provideRouter,使用navigate进行跳转

七、react的生命周期

        函数式中:

               setup:整个function就是类组件式的render生命周期

               componentDiaMount:挂载,useEffect的第二个参数用空数组则不会触发update

               componentDiaUpdate:更新,在函数式中用的是useEffect进行更新

                componentWillUnmount:销毁组件,在函数式中使用副作用函数的return

function Index() {
    useEffect(()=>{
        console.log('useEffect=>老弟你来了!Index页面')
        return ()=>{
            console.log('老弟,你走了!Index页面')
        }
    },[])
    return <h2>JSPang.com</h2>;
}

        

相关推荐

  1. 根据vue学习react

    2024-07-15 09:24:02       18 阅读
  2. VueReact

    2024-07-15 09:24:02       58 阅读
  3. vuereact、angular 区别

    2024-07-15 09:24:02       53 阅读
  4. reactvue区别

    2024-07-15 09:24:02       36 阅读
  5. react VS vue

    2024-07-15 09:24:02       24 阅读
  6. react根据后端返回数据动态添加路由

    2024-07-15 09:24:02       23 阅读
  7. Recat学习

    2024-07-15 09:24:02       27 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-15 09:24:02       67 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-15 09:24:02       72 阅读
  3. 在Django里面运行非项目文件

    2024-07-15 09:24:02       58 阅读
  4. Python语言-面向对象

    2024-07-15 09:24:02       69 阅读

热门阅读

  1. C语言指针常见陷阱及避免方法

    2024-07-15 09:24:02       28 阅读
  2. C# 使用正则解析html

    2024-07-15 09:24:02       21 阅读
  3. XML Schema 指示器

    2024-07-15 09:24:02       28 阅读
  4. 概率论原理精解【2】

    2024-07-15 09:24:02       25 阅读
  5. 刷题2路1线

    2024-07-15 09:24:02       21 阅读
  6. 面向对象编程的6大原则

    2024-07-15 09:24:02       23 阅读
  7. ArduPilot开源代码之AP_AHRS_View

    2024-07-15 09:24:02       20 阅读
  8. B4005 [GESP202406 四级] 黑白方块

    2024-07-15 09:24:02       74 阅读
  9. Unity3D中如何降低游戏的Drawcall详解

    2024-07-15 09:24:02       28 阅读
  10. Apache访问机制配置

    2024-07-15 09:24:02       26 阅读
  11. 比较运算符练习·二

    2024-07-15 09:24:02       17 阅读
  12. 什么是幂等?如何实现幂等?

    2024-07-15 09:24:02       25 阅读
  13. 道路运输企业管理人员安全考核试题(附答案)

    2024-07-15 09:24:02       20 阅读