React学习

最新推荐文章于 2024-08-25 09:57:22 发布
最新推荐文章于 2024-08-25 09:57:22 发布
阅读量903 收藏 16
点赞数 22
文章标签： react.js 学习 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61494821/article/details/136533277
版权

📑前言

本文主要是【React】——React基础的文章，如果有什么需要改进的地方还请大佬指出⛺️

🎬作者简介：大家好，我是听风与他🥇
☁️博客首页：CSDN主页听风与他
🌄每日一句：狠狠沉淀，顶峰相见

目录

React学习

1.react特点

  • 1.采用组件化的模式，声明式编程，提高开发效率及组件复用率
  • 2.使用虚拟DOM+优秀的Diffing算法，尽量减少与真实DOM的交互

1.1 ReactDOM

  • ReactDOM将组件或JSX元素渲染到DOM中。render（），负责在浏览器中渲染应用程序。
  • render方法只会覆盖，不会追加。

1.2 jsx的基本语法

  • 1.定义虚拟DOM，不能使用""

  • 2.标签中混入JS表达式时使用{}

    id = {myId.toUpperCase()}

  • 3.样式的类名指定不能使用class，使用className

  • 4.内敛样式要使用{{}}包裹

    style={{color:'skyblue',fontSize:'24px'}}

1.3 js遍历数组

objArr.map((item, index) => {
                return item.name
            })

1.4 组件的使用

当应用是以多组件的方式实现，这个应用技术一个组件化的应用

  • 1.组件名必须是首字母大写
  • 虚拟DOM元素只能有一个根元素
  • 3.虚拟DOM元素必须有结束标签</>

渲染类组件标签的基本流程

  • 1.React内部会创建组件实例对象
  • 调用render()得到虚拟DOM，并解析为真实DOM
  • 插入到指定的页面元素内部

1.5 类式组件

weather

class MyComponent extends React.Component {
    state = {isHot:false}
    render() {
        const {isHot} = this.state
        return <h1 onClick={this.changeWeather}>今天天气很{isHot?'炎热':'凉爽'}</h1>
    }
    changeWeather = ()=>{
        const isHot = this.state.isHot
        this.setState({isHot:!isHot})
    }
}
ReactDOM.render(<MyComponent/>,document.querySelector('.test'))

this的指向真的需要好好学习

  1. 组件中的 render 方法中的 this 为组件实例对象
  2. 组件自定义方法中由于开启了严格模式，this 指向undefined如何解决
    1. 通过 bind 改变 this 指向
    2. 推荐采用箭头函数，箭头函数的 this 指向
  3. state 数据不能直接修改或者更新

2.组件实例三大属性

1.state

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

简单的说就是组件的状态，也就是该组件所存储的数据

类式组件中的使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        class Weather1 extends React.Component{
            constructor(props){
                super(props)
            }
            state = {
                weather:'炎热'
            }
            render(){
                return <h1>今天的天气很{this.state.weather}</h1>
            }
        }
        ReactDOM.render(<Weather1/>,document.getElementById('zzl'))
    </script>
</body>
</html>

2.pros

与state不同，state是组件自身的状态，而props则是外部传入的数据

类式组件使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <div id="zz"></div>
    <script type="text/babel">
        class Person extends React.Component{
            render(){
                return (
                    <ul>
                        {/* 接受数据并显示*/} 
                        <li>{this.props.name}</li>
                        <li>{this.props.age}</li>
                        <li>{this.props.sex}</li>
                        </ul>
                )
            }
        }
        ReactDOM.render(<Person name="zzl" age="19" sex="男" />,document.getElementById('zz'))
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <div id="zz"></div>
    <script type="text/babel">
        class Person extends React.Component{
            render(){
                const {name,age,sex} = this.props
                return (
                    <ul>
                        {/* 接受数据并显示*/} 
                        <li>{this.props.name}</li>
                        <li>{this.props.age}</li>
                        <li>{this.props.sex}</li>
                        </ul>
                )
            }
            
        }
        const p = {name:"zzl",age:"18",sex:'男'}
        ReactDOM.render(<Person {...p} />,document.getElementById('zz'))
    </script>
</body>
</html>

函数式组件中的使用

函数在使用props的时候，是作为参数进行使用的(props)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <script type="text/javascript" src="/js/prop-types.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        const p = {name:"zzl",age:"18",sex:'男'}
        function Person(props){
            const {name,age,sex} = props
            return (
                    <ul>
                        <li>{name}</li>
                        <li>{age}</li>
                        <li>{sex}</li>
                        </ul>
                )
        }
        ReactDOM.render(<Person {...p} />,document.getElementById('zzl'))
    </script>
</body>
</html>

函数组件的 props定义:

  1. 在组件标签中传递 props的值
  2. 组件函数的参数为 props
  3. 对 props的限制和默认值同样设置在原型对象上

3.refs

Refs 提供了一种方式，允许我们访问 DOM 节点或在 render 方法中创建的 React 元素。

在我们正常的操作节点时，需要采用DOM API 来查找元素，但是这样违背了 React 的理念，因此有了refs

字符串形式

在react,Vue中，均可以使用ref来操作DOM

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <script type="text/javascript" src="/js/prop-types.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        class Demo1 extends React.Component{
             show1=()=> {
              const  {input1}=this.refs
              alert(input1.value)
            }
            show2 = () =>{
                const {input2}=this.refs
                alert(input2.value)
            }
            render(){
                return (
                    <div>
                        <input ref="input1" type="text" placeholder="点击按钮提示数据"  />
                        <button onClick={this.show1}>点击按键</button>
                        <input onBlur={this.show2} ref="input2" type="text" placeholder="失去焦点提示数据" />
                        </div>
                )
            }
        }
        ReactDOM.render(<Demo1/>,document.getElementById('zzl'))
    </script>
</body>
</html>

createRef创建ref容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <script type="text/javascript" src="/js/prop-types.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        class Demo1 extends React.Component{
            // React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点，该容器是专人专用的
            myRef = React.createRef()
             show1=()=> {
            alert(this.myRef.current.value);
            }
            show2 = () =>{
                const {input2}=this.refs
                alert(input2.value)
            }
            render(){
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮提示数据"  />
                        <button onClick={this.show1}>点击按键</button>
                        <input onBlur={this.show2} ref="input2" type="text" placeholder="失去焦点提示数据" />
                        </div>
                )
            }
        }
        ReactDOM.render(<Demo1/>,document.getElementById('zzl'))
    </script>
</body>
</html>

ref回调形式

ref={c=> this.username = c}

3.react中收集表单数据

1.非受控组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <script type="text/javascript" src="/js/prop-types.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        //创建组件
        class Login extends React.Component{
            handleSubmit = (event) =>{
                event.preventDefault() //阻止表单提交
                const {username,password}=this
                alert(`你输入的用户名是:${username.value},你输入的密码是:${password.value}`)
            }
            render(){
                return (
                    //登录按钮被点击时，该事件会被触发
                    <form  onSubmit={this.handleSubmit}>
                        用户名:<input ref={c=> this.username = c} name="username" type="text"/>
                        密码:<input ref={c=> this.password = c}  name="password" type="password"/>
                        <button>登录</button>
                        </form>
                )
            }
        }
        //渲染组件
        ReactDOM.render(<Login/>,document.getElementById('zzl'))
    </script>
</body>
</html>

2.受控组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <script type="text/javascript" src="/js/prop-types.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        class Login1 extends React.Component{
            handleSubmit = (event) =>{
                event.preventDefault()
                const {username,password} = this.state
                alert(`用户名为${username},密码为${password}`)
            }
            //初始化状态
            state = {
                username:'',
                password:''
            }
            //保持用户名
            saveUsername = (event)=>{
                this.setState({username:event.target.value})
            }
            savePassword = (event)=>{
                this.setState({password:event.target.value})
            }
            render(){
                return (
                    <form onSubmit={this.handleSubmit}>
                        用户名:<input onChange={this.saveUsername} type="text" name="username"  />
                        密码:<input onChange={this.savePassword} type="password" name="password"/>
                        <button>登录</button>
                        </form>
                )
            }
        }
        ReactDOM.render(<Login1/>,document.getElementById('zzl'))
    </script>
</body>
</html>

4.react的生命周期

mount 挂载

unmount 卸载

记住，const声明的变量不能再改了

opacity可设置透明度，通过设置透明度可以实现由浅入深，由深入浅的效果。

组件挂载完毕

componentDidMount()

组件将要卸载

componentWillUnmount()

设置一个定时器

this.timer = setInterval(()=>{

},200);

卸载组件

ReactDOM.unmountComponentAtNode()

初始化渲染、状态更新之后

render()

1.Demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <script type="text/javascript" src="/js/prop-types.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        class Life1 extends React.Component{
            state={
                opacity:1
            }
            death = () =>{
                ReactDOM.unmountComponentAtNode(document.getElementById('zzl'))
            }
            //挂载时
        componentDidMount(){ 
            this.timer = setInterval(()=>{
                //获取原状态
                let {opacity} = this.state
                opacity-=0.1
                if(opacity<=0) opacity=1
                this.setState({opacity})
            },200);
        }
        //组件将要卸载时
        componentWillUnmount(){
            clearInterval(this.timer)
        }
        render(){
            return (
                <div>
                    <h2 style={{opacity:this.state.opacity}}>学习react</h2>
                    <button onClick={this.death}>消失</button>
                    </div>
            )
        }
        }

        ReactDOM.render(<Life1/>,document.getElementById('zzl'))
    </script>
</body>
</html>

效果
在这里插入图片描述

初始化阶段总结

执行顺序 constructor -> getDerivedStateFromProps 或者 componentWillMount -> render -> componentDidMount

更新阶段

在这里插入图片描述

2.DOM的diffing算法

以按秒记时的时间为例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <script type="text/javascript" src="/js/prop-types.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        class Time1 extends React.Component{
            state = {date:new Date()}
            componentDidMount(){
                setInterval(()=>{
                    this.setState({date:new Date()})
                },1000)
            }
            render(){
                return (
                    <div>
                        <input type="text"/>
                        <span>时间是{this.state.date.toTimeString()}</span>
                        </div>
                )
            }
        }
        ReactDOM.render(<Time1/>,document.getElementById('zzl'))
    </script>
</body>
</html>

3.经典面试题

  1. react/vue中的key有什么作用？(key的内部原理是什么?)

  2. 为什么遍历列表时，key最好不要用index?

    • 1.简单来说，key是虚拟DOM对象的标识，在更新显示时key起着极其重要的作用。

    • 在状态中的数据发生变化，react会根据新数据生成新的虚拟DOM，随后React进行新虚拟DOM与旧虚拟DOM的diff比较

      比较规则:

      ​ a.旧虚拟DOM中找到了与新虚拟DOM相同的key:

      ​ 1.若虚拟DOM中内容没变，直接使用之前的真实DOM

      ​ 2.若虚拟DOM中内容变了，则生成新的真实DOM，随后替换掉页面中之前的真实DOM

      b.旧虚拟DOM中未找到与新虚拟DOM相同的key，则会根据数据创建新的真实DOM，随后渲染到页面

      1. 1.若对数据进行：逆序添加、逆序删除等破坏顺序操作。

        ​ 会产生没有必要的真实DOM更新 ==> 界面效果没问题，但效率低。

        2.如果结构中还包含输入类的DOM：

        ​ 会产生错误DOM更新 ==> 界面有问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>react</title>
</head>
<body>
    <script type="text/javascript" src="/js/react.development.js"></script>
    <script type="text/javascript" src="/js/react-dom.development.js"></script>
    <script type="text/javascript" src="/js/babel.min.js"></script>
    <script type="text/javascript" src="/js/prop-types.js"></script>
    <div id="zzl"></div>
    <script type="text/babel">
        /*
        慢动作回放----使用index索引值做为key

        初始数据:
                {id:1,name:'小张',age:18}
                {id:2,name:'小李',age:18}
        初始的虚拟DOM:
                <li key=0>小张---18</li>
                <li key=1>小李---19</li>
        更新后的数据:
                {id:3,name:'小王',age:18}
                {id:1,name:'小张',age:18}
                {id:2,name:'小李',age:18}

        更新数据后的虚拟DOM：
                <li key=0>小王---20</li>
                <li key=1>小张---20</li>
                <li key=2>小李---20</li>
--------------------------------------------------------
        慢动作回放----使用id索引值做为key

        初始数据:
                {id:1,name:'小张',age:18}
                {id:2,name:'小李',age:18}
        初始的虚拟DOM:
                <li key=1>小张---18</li>
                <li key=2>小李---19</li>
        更新后的数据:
                {id:3,name:'小王',age:18}
                {id:1,name:'小张',age:18}
                {id:2,name:'小张',age:18}

        更新数据后的虚拟DOM：
                <li key=3>小王---20</li>
                <li key=1>小张---20</li>
                <li key=2>小李---20</li>

                */
        class Person extends React.Component{
            state = {
                persons:[
                    {id:1,name:'小张',age:18},
                    {id:2,name:'小李',age:19}
                ]
            }

            add = () =>{
                const {persons} = this.state
                const p = {id:persons.length+1,name:'小王',age:20}
                this.setState({persons:[...persons,p]})
            }

            render(){
                return (
                    <div>
                        <h2>展示人员信息</h2>
                        <button onClick={this.add}>添加一个小王</button>
                        <ul>
                            {
                                this.state.persons.map((personObj,index)=>{
                                return <li key={index}>{personObj.name}---{personObj.age}</li>
                                })
                            }
                            </ul>
                            <hr/>
                            <ul>
                            {
                                this.state.persons.map((personObj)=>{
                                return <li key={personObj.id}>{personObj.name}---{personObj.age}</li>
                                })
                            }
                            </ul>
                        </div>
                )
            }
        }
        ReactDOM.render(<Person/>,document.getElementById('zzl'))
    </script>
</body>
</html>

📑文章末尾

在这里插入图片描述

听风与他
关注
  • 22
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
React学习心得浅谈
Coding Road
12-24 2140
文章目录React学习浅谈（1）-技术栈1. React技术栈1.1. 运行编译环境1.2. ES61.3. React1.4 Redux1.5 Middleware2. 环境搭建2.1 搭建开发环境2.2 搭建编译环境2.3 搭建完整的项目开发环境3. 编码设计3.1 创建项目目录3.2 编写action3.3 编写reduces3.4 编写components3.5 编写containers ...
React学习手册.zip
07-17
本React学习手册将深入探讨React的核心概念和实战技巧，帮助你从入门到精通。 首先，React的核心概念包括组件化开发。组件是React的基础单元，可以理解为可复用的代码块，它们像乐高积木一样组合起来构建整个应用。...
React学习路线
警警的博客
06-26 1072
React学习路线——初级、中级和高级
React 学习笔记
weixin_41184962的博客
04-25 4430
1. react- 用于构建用户界面的javaScript 库react 是一个将数据渲染微HTML视图的开源 JavaScript库2. facebook开发，且开源3. 原生JavaScript 原生javaScript操作DOM繁琐、效率低（DOM-APL 操作 UI)。 使用javascript直接操作DOM,浏览器会进行大量的重绘重排。 原生JavaScript没有组件化编码方案，代码复用率低。4. react 特点 react 核心库和re
react学习 新建react项目
似水流年，举重若轻
06-30 2185
一.搭建本地开发环境
react学习笔记
热门推荐
冷月心的博客
06-22 1万+
react学习笔记
React学习笔记(基础篇)
m0_54088427的博客
03-30 1971
React学习笔记(基础) 1.React介绍 ​ react由facebook公司推出，因为该公司不满足于市面上现有的前端框架，他们认为MVC只会让前端越来越复杂，因此react就诞生了，react只关注与视图层，官方对react的定位是：一个快速构建前端视图的javaScript库。 2.React的特点 虚拟DOM ​ 如果没有虚拟DOM，每次DOM改变的时候，都需要在浏览器中进行渲染。每一次DOM改变的时候，浏览器都需要重新计算CSS，进行布局处理，然后重新渲染页面，这都需要时间
React学习计划-React16--路由
我愿化作繁星
12-25 3052
三个不同的包发布在npm上：它们分别是：: 路由的核心库，提供很多的：组件，钩子: 包含所以内容，并添加一些专门用于DOM组件。例如等: 包含所以内容，并添加一些专门用于的API。例如等与版本相比，改变了什么？内置组件的变化：移除,新增等变为等新增多个hookuseParamsuseMatch等官方明确推荐函数式组件了！！！
React 学习路线
weixin_43924896的博客
11-02 1601
以下所谈及的，就是为你定制的 React 学习路线。 为了能稳固基础，我们一定要逐步地来进行学习。 倘若你正在建造一间房子，那么为了能快点完成，你是否会跳过建造过程中的部分步骤？如在具体建设前先铺设好部分石头？或直接在一块裸露的土地上先建立起墙面？ 又假如你是在堆砌一个结婚蛋糕：能因为上半部分装饰起来更有趣，而直接忽略了下半部分？ 不行吗？ 当然不行。众所周知，这些做法只会导致失败。 因此，不要想着通过接触 React 来将 ES6 + Webpack + Babel + React + Routing +
React 入门学习
m0_62118859的博客
04-21 9324
目录 1. React 介绍 2. React 特点 （1）声明式 （2）组件化 （3）一次学习，跨平台编写 3. React 脚手架 方式 1 方式 2 4. React 基本使用 5. React 创建元素练习 1. React 介绍 了解 react 的历史背景和基本概念 React起源于 Facebook 的内部项目。因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套...
react学习小记
wajueju的博客
08-05 1263
react
React学习手册完整版带目录.zip
06-25
"React学习手册完整版带目录.zip"包含了深入学习React所需的所有资料，包括基本概念、核心原理以及高级技巧。 首先，手册的目录可能会涵盖以下关键知识点： 1. **React基础知识**：介绍React的基本概念，如JSX语法...
React学习资源汇总.pdf
09-14
React学习资源汇总.pdf
React学习路线脑图
02-01
React学习路线脑图
vue ref和reactive区别
最新发布
灰海
08-25 395
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
react面试题二
笃励的博客
08-23 603
React组件的生命周期方法提供了在不同阶段执行特定操作的能力，使得开发者可以在组件的不同生命周期中管理状态、执行副作用操作，并且优化性能和处理错误。在实际开发中，理解和正确使用这些生命周期方法是构建可靠和高效React应用的重要基础。请注意，随着React版本的更新，部分生命周期方法可能已被废弃或替换，因此建议查阅最新的React文档以获取最准确的信息。
React 入门第一天：从Vue到React的初体验
Caleb的博客
08-21 581
作为一名合格的前端工程师，怎么能只会Vue呢？学习React不仅是一场新技术的探索，更是对前端开发思维的一次重新审视。在这里，我将分享学习React的心得，希望能帮助那些和我一样从Vue转向React的开发者。
ReactVChart矩形转化漏斗图配置示例
知识点沉淀包括不限于前端
08-22 399
ReactVChart 矩形转化率 漏斗图 示例
react学习路线图
08-20
React学习路线图是一个指导学习React的图表，它提供了一条学习React所需的知识和技能的路径。这个路线图包括了React的基础知识和重要概念，以及一些额外的学习资源和库。你可以使用这个路线图作为学习React的指南，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

听风与他

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值