React学习01：react入门、state、props、ref详解

已于 2024-01-01 15:28:22 修改
阅读量331 收藏
点赞数
分类专栏： React 文章标签： react js javascript
于 2021-06-30 12:01:52 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43216437/article/details/118355358
版权

React学习01

React简介

React是一个将数据渲染为HTML视图的开源JavaScript库
使用React可解决原生DOM的三个问题。

  • 原生JavaScript操作DOM繁琐、效率低(DOM-API操作UI)
  • 使用JavaScript直接操作DOM，浏览器会进行大量的重绘重排
  • 原生JavaScript没有组件化编码方案，代码复用率低

React的特点

  • 采用组件化模式、声明式编码，提高开发效率及组件复用率
  • 在React Native中可以使用React语法进行移动端进行开发
  • 使用虚拟DOM+优秀的Diffing算法，尽量减少和真实DOM的交互（这也是React高效的原因）

React第一个例子

React的库由以下组成：

  • babel.min.js:浏览器不兼容转化的
  • react.development.js：React的核心库
  • react-dom.development.js:React扩展库操作Dom的库
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react</title>
</head>
<body>
<!--准备一个容器-->
<div id="test"></div>
<!--先引入react.js核心文件-->
<script src="../resources/react.js"></script>
<!--再引入reactdom.js操作dom的文件-->
<script src="../resources/react-dom.js"></script>
<!--最后引入babel文件-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js"></script>
<!--这儿type是text/babel表示写的不是js是jsx-->
<script type="text/babel">
    //创建虚拟dom，一定不要加引号
    const VDOM = <h1>hello,react</h1>
    //渲染虚拟DOM到页面
    ReactDOM.render(VDOM, document.getElementById('test'));
</script>
</body>
</html>

当调用render渲染页面时，React会自动比较两次渲染的元素，只有真实dom中更新发生变化的部分，没发生变化的保持不变

虚拟DOM的两种创建方式

JSX主要是为了创建虚拟DOM

  • 不使用Jsx(很繁琐)
<script>
    let VDOM = React.createElement('h1',{id:'title'},'hello,react');
    ReactDOM.render(VDOM,document.getElementById('test'));
</script>
  • 使用JSX
<script type="text/babel">
    const VDOM=<h1 id="title">hello,react</h1>
    ReactDOM.render(VDOM,document.getElementById('test'))
</script>
  • 用小括号显示缩进
  const VDOM=(
        <h1 id="title">
            <span id="title">hello,react</span>
        </h1>
    )

虚拟DOM与真实DOM的区别

关于虚拟DOM

  • 本质是Object类型的对象(一般对象)
  • 虚拟DOM比较“轻”，真实DOM比较“重”，因为虚拟DOM是React内部在用，无需真实DOM上那么多属性
  • 虚拟DOM最终会被React转化为真实DOM，呈现在页面上

JSX

在这里插入图片描述
在这里插入图片描述

JSX练习

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../resources/react.js"></script>
    <script src="../resources/react-dom.js"></script>
    <script src="../resources/browser.min.js"></script>
</head>
<body>
<div id="test"></div>

<script type="text/babel">

   //模拟一些数据
    const data=['Angular','React','Vue']

    const VDOM=(
        <div>
            <h1>前端JS框架列表</h1>
            <ul>
                {
                    data.map((item,index)=>{
                        //遍历的时候每个元素都必须有一个唯一的key
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        </div>
    )
    ReactDOM.render(VDOM,document.getElementById('test'));
</script>
</body>
</html>

模块与组件

在这里插入图片描述

函数式组件

函数的定义首字母大写，渲染的时候，要写函数名标签
在这里插入图片描述

<div id="test"></div>
<script type="text/babel">
    function Demo() {
        console.log(this)// 此处的this是undefined 因为babel开启了严格模式，所有this无法指向window
        return <h2>函数式组件</h2>
    }
    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

类式组件

类复习在这里插入图片描述
继承

  • 和Java不同的是Js中类的继承允许继承构造器，Java是不允许的
    在这里插入图片描述
  • 代码实例

组件的三大属性
在这里插入图片描述
创建类式组件的时候，组件名首字母必须大写

<div id="test"></div>
<script type="text/babel">
    //创建类式组件(必须继承Component和实现render方法)
    class MyComponent extends React.Component{
        render(){
            //render是放在哪里的？--类的原型对象上，供实例使用
            //render中的this是谁？--MyComponent实例对象
            console.log(this);//组件的三大属性是类的实例的
            return <h2>类式组件适用于复杂组件</h2>
        }
    }

    ReactDOM.render(<MyComponent/>,document.getElementById('test'));
</script>

在这里插入图片描述

组件属性

组件属性有state、props、refs

state

state改变的时候组件会重新执行render方法，重新渲染页面

在这里插入图片描述

  • 需求点击页面显示不同的效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="../resources/react.js"></script>
    <script src="../resources/react-dom.js"></script>
    <script src="../resources/browser.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
    //创建组件
    class Weather extends React.Component{
        constructor(props) {
            super(props);
            //初始化状态（这儿的state赋值是对象）
            this.state={isHot:true}
        }
        render(){
            //解构赋值
            //读取状态
            const {isHot}=this.state;
            
            return <h1>今天天气很{isHot?'炎热':'凉爽'}</h1>
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Weather/>,document.getElementById('test'));
</script>
</body>
</html>

React事件

深入理解this

  • 类中局部开启了严格模式所以this是undefined在这里插入图片描述
    在调用的时候，this.changeWeather给了onClick,onClick直接进行了调用，所以是无法得到this的在这里插入图片描述

bind的使用

bind的用法有两种

  • 生成新的函数
  • 改变this的指向
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bind</title>
</head>
<body>
<script>
    function bind() {
        console.log(this)
    }

    //输出window对象(如果方法里是严格模式则输出undefined)
    bind();

    //使用bind绑定新的对象,生成新的函数bind1
    let bind1 = bind.bind({a:1,b:2});

    //调用bind1输出新的对象而不是window对象
    bind1();
</script>
</body>
</html>

setState的使用

  //state(状态)不可以直接更改要借助内置的API进行更改
            //获取原来的isHot
            let isHot = this.state.isHot;
            this.setState({isHot:!isHot});
  • 最终修改后
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="../resources/react.js"></script>
    <script src="../resources/react-dom.js"></script>
    <script src="../resources/browser.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
    //创建组件
    class Weather extends React.Component{
        //构造器调用几次？--<Weather/>只调用了1次，所以构造器也只使用了一次
        constructor(props) {
            super(props);
            //初始化状态（这儿的state赋值是对象）
            this.state={isHot:true}

            /*
            * 对于右边changeWeather放在原型对象上，
            * 所以可以通过实例对象(this)找到原型对象，找到changeWeather,
            * this是当前实例对象
            * bind:1、生成新的函数 2、改this的指向
            * 这儿新生成的函数是nice，是this的。所以在调用的时候也要调用this的nice函数
            * */
            this.nice=this.changeWeather.bind(this);
        }

        //render调用几次？--1+n次
        render(){
            //解构赋值
            //读取状态
            const {isHot}=this.state;

            //this.changeWeather --changeWeather放在哪里？--Weather的原型对象上 所以必须用this
            //由于changeWeather是作为onClick的回调，所以不是通过实例进行调用的，是直接进行调用的
            //类中的方法默认开启了局部严格模式，所以changeWeather中的this是undefined
            return <h1 onClick={this.nice}>今天天气很{isHot?'炎热':'凉爽'}</h1>
        }

        //React添加事件

        //changeWeather调用几次？--点击多少次调用多少次
        changeWeather(){

            //changeWeather放在哪里？--Weather的原型对象上
            //由于changeWeather是作为onClick的回调，所以不是通过实例进行调用的，是直接进行调用的
            //类中的方法默认开启了局部严格模式，所以changeWeather中的this是undefined

            //state(状态)不可以直接更改要借助内置的API进行更改
            //获取原来的isHot
            //注意：状态必须通过setState进行更新，且更新是合并不是替换
            let isHot = this.state.isHot;
            this.setState({isHot:!isHot});
        }
    }
    //渲染组件到页面
    ReactDOM.render(<Weather/>,document.getElementById('test'));
</script>
</body>
</html>

state的简写方式

类中可以直接写赋值语句，相当于给类的实例添加属性，

类构造参数的简写方式在这里插入图片描述

  • state的简写
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>bubia</title>
    <script src="../resources/react.js"></script>
    <script src="../resources/react-dom.js"></script>
    <script src="../resources/browser.min.js"></script>
</head>
<body>
<div id="test"></div>
<script type="text/babel">
    class Weather extends React.Component{
        
        //state简写
        //初始化state
        state={isHot:true}

        render(){
            const {isHot}=this.state;
            return <h1 onClick={this.changeWeather}>今天天气{isHot?'炎热':'凉爽'}</h1>
        }

        //使用箭头函数就可以把this搞进来了，箭头函数的this是静态的（es6）
        //自定义方法--要用赋值语句的形式+箭头函数
        //使用箭头函数的目的是为了得到实例对象(this)
        changeWeather=()=>{
            console.log(this)
            const isHot = this.state.isHot;
            this.setState({isHot:!isHot});
        }
    }
    ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
</body>
</html>

props

需求：自定义用来显示一个人员信息的组件
在这里插入图片描述

使用state进行实现(不建议使用)

<script type="text/babel">
    //创建组件
    class Person extends React.Component{
        state={name:'tom',gender:'男',age:19};
        render(){
            return (
                <ul>
                    <li>姓名：{this.state.name}</li>
                    <li>性别：{this.state.gender}</li>
                    <li>年龄：{this.state.age}</li>
                </ul>
            )
        }
    }
    ReactDOM.render(<Person/>,document.getElementById('test'))
</script>

使用props

<div id="test"></div>
<script type="text/babel">
    //创建组件
    class Person extends React.Component{
        render(){
            //解构赋值
            const {name,gender,age}=this.props;
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{gender}</li>
                    <li>年龄：{age}</li>
                </ul>
            )
        }
    }
    ReactDOM.render(<Person name='dasg' gender='男' age='19' />,document.getElementById('test'))
</script>

批量传递props

  • 进化之前
<div id="test"></div>
<script type="text/babel">
    //创建组件
    class Person extends React.Component{
        render(){
            //解构赋值
            const {name,gender,age}=this.props;
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{gender}</li>
                    <li>年龄：{age}</li>
                </ul>
            )
        }
    }
    const p={name:'lxd',gender:'男',age:'19'};
    //太繁琐了一个一个往render里面塞
    ReactDOM.render(<Person name={p.name} gender={p.gender} age={p.age} />,document.getElementById('test'))
</script>
  • 批量

通过{…p}进行批量props，不过名字默认就是传过来的json里的key}

<div id="test"></div>
<script type="text/babel">
    //创建组件
    class Person extends React.Component{
        render(){
            //解构赋值
            const {name,gender,age}=this.props;
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{gender}</li>
                    <li>年龄：{age}</li>
                </ul>
            )
        }
    }
    const p={name:'lxd',gender:'男',age:'19'};
    //通过{...p进行批量props，不过名字默认就是传过来的json里的key}
    ReactDOM.render(<Person {...p} />,document.getElementById('test'))
</script>
  • 来源

使用了扩展运算符（babel+react可以使用展开运算符展开一个对象）在这里插入图片描述

对props进行限制

在这里插入图片描述

<div id="test"></div>
<script type="text/babel">
    //创建组件
    class Person extends React.Component{
        render(){
            //解构赋值
            const {name,gender,age}=this.props;
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{gender}</li>
                    <li>年龄：{age+1}</li>
                </ul>
            )
        }
    }

    //限制读取的属性（添加规则）
    Person.protoTypes={
        name:PropTypes.string.isRequired,
        gender:PropTypes.string,
        age:PropTypes.number
    }

    //默认规则配置
    Person.defaultProps={
        gender:'男',
        age:18
    }

    const p={name:'lxd',gender:'男',age:19};
    //通过{...p进行批量props，不过名字默认就是传过来的json里的key}
    ReactDOM.render(<Person {...p} />,document.getElementById('test'))
</script>

props简写方式

props是只读的

<div id="test"></div>
<script type="text/babel">
    //创建组件
    class Person extends React.Component{
    //限制读取的属性（添加规则）
        static protoTypes={
            name:PropTypes.string.isRequired,
            gender:PropTypes.string,
            age:PropTypes.number
        }
        //默认规则配置
        static defaultProps={
            gender:'男',
            age:18
        }
        render(){
            //解构赋值
            const {name,gender,age}=this.props;
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{gender}</li>
                    <li>年龄：{age+1}</li>
                </ul>
            )
        }
    }
    const p={name:'lxd',gender:'男',age:19};
    //通过{...p进行批量props，不过名字默认就是传过来的json里的key}
    ReactDOM.render(<Person {...p} />,document.getElementById('test'))
</script>

类式组件中的构造器与props

所以类中的构造器能省略就省略在这里插入图片描述

函数式组件使用props

函数式组件只能使用组件三大属性的props,把props作为参数进行使用

<div id="test"></div>
<script type="text/babel">
   //props作为参数进行使用
    function Demo(props) {
       //解构赋值
        const {name,gender,age}=props;
        return (
            <h3>
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{gender}</li>
                    <li>年龄：{age}</li>
                </ul>
            </h3>
        )
    }

    const p={name:'lxd',gender:'男',age:19};
    ReactDOM.render(<Demo {...p}/>,document.getElementById('test'))
</script>

props总结

在这里插入图片描述

refs

案例：左侧输入完后，点击提示输入数据弹出框，右侧输入完后失去焦点，弹出弹出框
在这里插入图片描述

字符串形式的ref(不推荐使用)

为啥叫refs呢–因为refs里有多个ref。字符串形式的ref：ref是用字符串进行定义的
ref=“input1” //input1就是当前dom（ref的作用就是存储节点的信息）
在这里插入图片描述

<div id="test"></div>
<script type="text/babel">
    class Demo extends React.Component{
        render() {
            return (
                <div>
                    <input ref="input1" type="text" placeholder="点击按钮提示左侧的数据"/>&nbsp;
                    <button onClick={this.showData}>点击提示数据</button>&nbsp;
                    <input ref="input2" onBlur={this.showData1} type="text" placeholder="失去焦点提示数据"/>
                </div>
            );
        }
        showData=()=>{
            const {input1}=this.refs;
            alert(input1.value)
        }
        showData1=()=>{
            const {input2}=this.refs;
            alert(input2.value)
        }
    }
    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

回调形式的ref

不使用字符串ref的原因是效率太低

  • ref={currentNode=>this.input1=currentNode} //currentNode代表当前的dom
<div id="test"></div>
<script type="text/babel">
    class Demo  extends React.Component{
        render() {
            return (
                <div>
                    <input ref={currentNode=>this.input1=currentNode}  type="text" placeholder="点击按钮提示左侧的数据"/>&nbsp;
                    <button onClick={this.showData}>点击提示数据</button>&nbsp;
                    <input ref={currentNode=>this.input2=currentNode} onBlur={this.showData2}  type="text" placeholder="失去焦点提示数据"/>
                </div>
            );
        }

        showData=()=>{
            //结构赋值
            const {input1}=this;
            alert(input1.value)
        }

        showData2=()=>{
            //解构赋值
            const {input2}=this;
            alert(input2.value)
        }
    }

    ReactDOM.render(<Demo/>,document.getElementById('test'))
</script>

createRef的使用

使用React.createRef();用几个得创建几个

<div id="test"></div>
<script type="text/babel">
    class Demo  extends React.Component{

        //创建一个ref的容器(装节点的)
        myRef=React.createRef();
        myRef2=React.createRef();
        
        render() {
            return (
                <div>
                    <input ref={this.myRef} type="text" placeholder="输入显示左边"/>
                    <button onClick={this.showData}>点击显示左边内容</button>
                    <input ref={this.myRef2} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                </div>
            );
        }

        showData=()=>{
            alert(this.myRef.current.value)
        }

        showData2=()=>{
            alert(this.myRef2.current.value)
        }
    }

    ReactDOM.render(<Demo/>,document.getElementById('test'));
</script>

React的事件

发生事件的事件源和要操作的事件源是同一个的时候可以不加标识即ref,
不要过度使用ref，发生事件的元素和要操作的元素是同一个的时候不加ref
在这里插入图片描述

<script type="text/babel">
    class Demo  extends React.Component{

        //创建一个ref的容器(装节点的)
        myRef=React.createRef();
        render() {
            return (
                <div>
                    <input ref={this.myRef} type="text" placeholder="输入显示左边"/>
                    <button onClick={this.showData}>点击显示左边内容</button>
                    <input onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
                </div>
            );
        }

        showData=()=>{
            alert(this.myRef.current.value)
        }

        showData2=(event)=>{
            alert(event.target.value)
        }
    }

    ReactDOM.render(<Demo/>,document.getElementById('test'));
</script>
极乐码农
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
boilerplate-react-webpack:Webpack React入门解决方案
05-01
React的入门Webpack项目这是一个入门项目，使用webpack转换和捆绑ES6 React代码。 要使用，请考虑以下步骤： 分叉此回购根据您正在构建的应用程序重命名您的存储库git clone https://github.com/[your-account]/...
React教程详解一（props、state、refs、生命周期）
一只努力搬砖的打工妹纸
03-01 550
大厂用react框架开发的较多哦，从本期开始，总结react教程，一起卷起来~
React详解（基础知识）——react学习part01
weixin_46515434的博客
11-14 81
1.官网 1.英文官网: https://reactjs.org/ 2.中文官网:https://react.docschina.org/ 2.介绍描述 1.用于动态构建用户界面的 JavaScript 库(只关注于视图) 2.由Facebook开源 3.React的特点 1.声明式编码 2.组件化编码 3.React Native 编写原生应用 4.高效（优秀的Diffing算法） 4.React高效的原因 1.使用虚拟(virtual)DOM, 不总是直接操作页面真实DOM。 2.DOM Diff
React教程（详细版）
热门推荐
Ronychen的博客
03-19 18万+
一、简介（背景） 1.1、概念 它是一个将数据渲染为HTML视图 的js库 1.2、原生js痛点 用dom的API去操作dom，繁琐且效率低 用js直接操作dom，浏览器会进行大量的回流和重绘 原生jjs没有组件化的编程方案，代码复用性低，哪怕有模块话的概念，但模块化也只能拆解一个个js，对样式和结构也没办法拆解，组件化就相当于3剑客整体拆解，成为一个个的小功能 1.3、React特点 采用组件化模式，声明式编码，提高开发效率和组件复用性 在React Native中可以用react预发进行安卓、io
详解 React 中的 ref
nana_lala的博客
02-21 802
在 React 中，ref 主要用于获取组件实例或访问 DOM 节点，也可以用于组件间通信。它是一个普通的 JavaScript 对象，拥有一个名为 current 的属性。它的创建方式有两种，createRef 和 useRef。函数组件中使用 useRef 来创建 ref。接收一个任意初始值，如字符串、对象，甚至是函数等。使用 useRef 创建的 ref 只会在组件首次渲染时创建，每次都会返回相同的引用，所以通过 ref 可以拿到最新的值。
React Hooks 全解: 常用 Hooks 及使用场景详解
笔记、经验、日常分享
04-13 1094
React 中常用的 10 个 Hooks,包括 useState、useEffect、useContext、useReducer、useCallback、useMemo、useRef、useLayoutEffect、useImperativeHandle 和 useDebugValue。这些 Hooks 涵盖了状态管理、副作用处理、性能优化、DOM 操作等各个方面,为开发者提供了强大的工具,大幅提高了开发效率和代码质量。让我们一起探索 React Hooks 的强大功能,提升您的 React 开发水平。
React学习二（组件详解）
qq_44872688的博客
03-12 1449
文章目录一、React数据流二、组件的三大特性1、属性（props）（1）React Props默认值与标签属性限制（2）应用-React组件切分与提取2、状态（state）（1）state的定义（2）更新状态3、生命周期（1）挂载（2）数据更新过程（3）卸载 一、React数据流       在 React 中，数据是自顶向下单向流动的，即从父组件到子组件。       state 与
React组件的props属性、state属性、refs属性详解
zzDAYTOY的博客
07-29 796
React组件属性 1、props属性 react中说的单向数据流值说的就是props，根据这一特点它还有一个作用：组件之间的通信。props本身是不可变的，但是有一种情形它貌似可变，即是将父组件的state作为子组件的props，当父组件的state改变，子组件的props也跟着改变，其实它仍旧遵循了这一定律：props是不可更改的。 props属性的特点： 每个组件对象都会有props(properties的简写)属性 组件标签的所有属性都保存在props中 内部读取某个属性值：this.prop
React学习笔记三——组件三大属性state、props和refs详解
前端探险家的博客
06-23 498
state 1.类中方法this的指向 constructor和render里的this指向类组件的实例对象 在类组件内部定义的普通函数，作为onClick的回调，不是通过实例调用的，是直接调用，并且类组件内部默认开启了局部严格模式，所以this指向undefind 2.将类组件内部定义的函数内部this指向类组件的实例对象 利用箭头函数 在构造器中通过bind改变函数this指向，赋值于实例对象的新函数 3.初始化状态写法 初始化状态写在构造器中 this.state = {} 如果类组件省略构
React + ts学习笔记
luobo2345的博客
05-06 976
在react中使用ts，定义函数组件、类组件、hook使用（useState，useRef、useMemo），事件处理（事件对象、事件函数），ts基本使用
react-adopt：像pro一样组成render props组件
02-05
:smiling_face_with_sunglasses: React Adopt-像pro一样组成render props组件 :scroll: 表中的内容 :face_with_monocle: 为什么是React生态系统的新炒作，这是事实。 因此，当您需要一起使用多个render props组件时...
react学习入门_react入门_react前端学习
09-20
适合react入门学习，通俗易懂，注解丰富，便于理解
React:一个入门 React 的学习笔记
05-14
react不像jquery一样能通过src直接使用它需要一系列的辅助工具的支持，我们在学习react之前需要初步了解 nodejs 以及 babel。 另外还需要掌握 jsx 函数式编程 等知识。 1、 安装。 2、 新建项目文件夹 例如这个仓库...
react-trello:React基础知识课程项目的入门代码
03-19
构建看板风格的React App 的React Fundmentals模块中的项目入门代码。跟随课程以完成项目，或从与您的讲师一起参加实时课程。查看最终结果的现场演示： : 。创建React应用该项目使用流行的命令来设置现代React应用...
vue3+arco design通过动态表单方式实现自定义筛选
最新发布
m0_72167535的博客
05-07 387
vue3+arco design通过动态表单方式实现自定义筛选
基于Springboot的家具网站
趙兴晨的博客
05-03 542
本文介绍了一款基于现代Web技术构建的家具网站，旨在通过互联网技术优化家具产品的展示与销售，提高用户的购物体验，同时为家具制造商和零售商提供一个高效的在线销售平台。本研究的主要目的是设计并实现一个高效、易用的家具网站，通过系统化的产品展示流程和智能化的购物功能，提升家具产品的在线销售效率和管理水平。本研究通过设计和实现家具网站，有效地解决了传统家具销售中的展示局限性和购物效率低下的问题，提高了家具产品的在线销售效率和用户的购物体验，并为相关领域的研究和实践提供了有益的参考。
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。
XING的博客
05-03 1198
基于Springboot的旅游管理系统（有报告）。Javaee项目，springboot项目。数据库作为系统数据储存平台，实现了基于B/S结构的Web系统。界面简洁，操作简单。采用M（model）V（view）C（controller）三层体系结构，通过。
vue快速入门（五十）重定向
不起眼小菜菜的博客
05-03 424
注释很详细，直接上代码……
react报错Warning: Home.state: must be set to an object or null
07-08
这个错误是由于在React组件中使用了`state`，但是`state`的初始值不是一个对象或null引起的。在React中，组件的`state`应该始终是一个对象或null。 要解决这个问题，你可以检查`Home`组件中的`state`的初始化部分，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值