ReactJS入门

最新推荐文章于 2024-04-23 13:38:37 发布
最新推荐文章于 2024-04-23 13:38:37 发布
阅读量592 收藏 1
点赞数
分类专栏： 租房系统 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44584110/article/details/122445167
版权

一、React简介

官网： https://reactjs.org/
官方一句很简单的话，道出了什么是ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的JS框架。
ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。ReactJS可以 用于 MVC 架构，也可以用于 MVVM 架构，或者别的架构。

ReactJS圈内的一些框架简介：

  • Flux Flux是Facebook用户建立客户端Web应用的前端架构，
    它通过利用一个单向的数据流补充了React的组合视图组件，这更是一种模式而非框架。
  • Redux Redux 是 JavaScript 状态容器，提供可预测化的状态管理。Redux可以让React组件状态共享变得简单。
  • Ant Design of React
    Ant Design提供了丰富的组件，包括：按钮、表单、表格、布局、分页、树组件、日历等。

二、搭建环境

1、创建项目
使用UmiJS作为构建工具。
在这里插入图片描述
在这里插入图片描述
输入命令，进行初始化：

tyarn init -y

初始化完成后，在命令输入如下命令，导入umi依赖：

tyarn add umi --dev #项目中添加umi的依赖

.2、编写HelloWorld程序

第一步，在工程的根目录下创建config目录，在config目录下创建config.js文件

在UmiJS的约定中，config/config.js将作为UmiJS的全局配置文件。
在这里插入图片描述
在config.js文件中输入以下内容，以便后面使用：

 //导出一个对象，暂时设置为空对象，后面再填充内容
 export default {};

第二步，创建HelloWorld.js页面文件

在umi中，约定存放页面代码的文件夹是在src/pages，可以通过singular:false来设置单数的命名方式，我们采用 默认即可。

在这里插入图片描述
在HelloWorld.js文件中输入如下内容：

export default () => {
	return <div>hello world</div>;
}

第三步，启动服务查看页面效果，在命令窗口输入下方命令：
#启动服务
umi dev

在这里插入图片描述
可以看到，通过/HelloWorld路径即可访问到刚刚写的HelloWorld.js文件。
在 umi 中，可以使用约定式的路由，在 pages 下面的 JS 文件都会按照文件名映射到一个路由，比如上面这个例子，访问 /helloworld 会对应到 HelloWorld.js。
3、添加umi-plugin-react插件
umi-plugin-react插件是umi官方基于react封装的插件，包含了13个常用的进阶功能。
具体可查看：https://umijs.org/zh/plugin/umi-plugin-react.html

#添加插件
tyarn add umi-plugin-react --dev

添加成功：
在这里插入图片描述
接下来，在config.js文件中引入该插件：

export default { 
	plugins: [
		['umi-plugin-react', {
			//暂时不启用任何功能
		}]
	]
};

4、构建和部署
通过umi可以进行转码生成文件的，具体操作如下：

umi build

在这里插入图片描述
至此，开发环境搭建完毕。

三、React快速入门

1、JSX语法
JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。
使用JSX语法，需要2点注意：

  1. 所有的html标签必须是闭合的。
  2. 在JSX语法中，只能有一个根标签，不能有多个。如：
const div1 = <div>hello world</div>	//正确
const div2 = <div>hello</div> <div>world</div> //错误

在JSX语法中，如果想要在html标签中插入js脚本，需要通过{}插入js脚本。
在这里插入图片描述
2、组件
组件是React中最重要也是最核心的概念，一个网页，可以被拆分成一个个的组件。
2.1、修改Helloworld.js文件:

import React from 'react'; //第一步，导入React

class HelloWorld extends React.Component { //第二步，编写类并且继承 			React.Component 
	render(){ //第三步，重写render()方法，用于渲染页面
		return <div>hello world!</div> //JSX语法
	}
}

export default HelloWorld; //第四步，导出该类

2.2、导入自定义组件
创建Show.js文件，用于测试导入组件：

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件class 
Show extends React.Component{
	render(){
		return <HelloWorld/>; //使用HelloWorld组件
	}
}
export default Show;

测试：
在这里插入图片描述
2.3、组件参数
组件是可以传递参数的，有2种方式传递，分别是属性和标签包裹的内容传递，具体使用如下：

import React from 'react'
import HelloWorld from './HelloWorld' //导入HelloWorld组件class 
Show extends React.Component
	render(){
		return <HelloWorld name="zhangsan">shanghai</HelloWorld>; //使用HelloWorld组件
	}
}
export default Show;

其中，name="zhangsan"就是属性传递，shanghai就是标签包裹的内容传递。
对应接受的也是2种方法：

  • 属性：this.props.name 接收；
  • 标签内容：this.props.children 接收；
import React from 'react'; //第一步，导入React
class HelloWorld extends React.Component { //第二步，编写类并且继承 React.Component 
	render(){ //第三步，编写render()方法，用于渲染页面
		return <div>hello world! name={this.props.name}, address={this.props.children}</div> 
	}
}
export default HelloWorld; //第四步，导出该类

测试：
在这里插入图片描述
2.4、组件的状态
每一个组件都有一个状态，其保存在this.state中，当状态值发生变化时，React框架会自动调用render()方法，重 新渲染页面。
其中，要注意两点：
一： this.state值的设置要在构造参数中完成；
二：要修改this.state的值，需要调用this.setState()完成，不能直接this.state进行修改；
下面通过一个案例进行演示，这个案例将实现：通过点击按钮，不断的更新this.state，从而反应到页面中。

import React from 'react'
class List extends React.Component{ 
	constructor(props){ // 构造参数中必须要props参数
		super(props); // 调用父类的构造方法
		this.state = { // 初始化this.state
			dataList : [1,2,3],
			maxNum : 3
		};
}

	render(){
		return (
		<div>
			<ul>
				{
					// 遍历值
					this.state.dataList.map((value,index) => { return <li key={index}>{value}</li>
				})
	}
			</ul>
			<button
				onClick={()=>{ //为按钮添加点击事件
					let maxNum = this.state.maxNum + 1;
					let list = [...this.state.dataList, maxNum]; this.setState({ //更新状态值
	dataList : list, maxNum : maxNum
				});
				}}>
			添加
			</button>
		</div>
	);
}
}
export default List;

测试：
在这里插入图片描述
2.5、生命周期
组件的运行过程中，存在不同的阶段。React 为这些阶段提供了钩子方法，允许开发者自定义每个阶段自动执行的函数。这些方法统称为生命周期方法（lifecycle methods）。
在这里插入图片描述
生命周期示例：

import React from 'react'; //第一步，导入React 
class LifeCycle extends React.Component {
	constructor(props) { 
		super(props);//构造方法
		console.log("constructor()");
	}
	componentDidMount() {
		//组件挂载后调用
		console.log("componentDidMount()");
	}
	componentWillUnmount() {
		//在组件从 DOM 中移除之前立刻被调用。
		console.log("componentWillUnmount()");
	}
	componentDidUpdate() {
		//在组件完成更新后立即调用。在初始化时不会被调用。		
		console.log("componentDidUpdate()");
	}
	shouldComponentUpdate(nextProps, nextState){
		// 每当this.props或this.state有变化，在render方法执行之前，就会调用这个方法。
		// 该方法返回一个布尔值，表示是否应该继续执行render方法，即如果返回false，UI 就不会更新，默认返回true。
		// 组件挂载时，render方法的第一次执行，不会调用这个方法。
		console.log("shouldComponentUpdate()");
	}
	
	render() {
		return (
			<div>
				<h1>React Life Cycle!</h1>
			</div>
		);
	}
}
export default LifeCycle;

四、Model分层的概念

1、分层
在这里插入图片描述
上图中，左侧是服务端代码的层次结构，由 Controller、Service、Data Access 三层组成服务端系统：

  • Controller 层负责与用户直接打交道，渲染页面、提供接口等，侧重于展示型逻辑。
  • Service 层负责处理业务逻辑，供 Controller 层调用。
  • Data Access 层顾名思义，负责与数据源对接，进行纯粹的数据读写，供 Service 层调用。

上图的右侧是前端代码的结构，同样需要进行必要的分层：

  • Page 负责与用户直接打交道：渲染页面、接受用户的操作输入，侧重于展示型交互性逻辑。
  • Model 负责处理业务逻辑，为 Page 做数据、状态的读写、变换、暂存等。
  • Service 负责与 HTTP 接口对接，进行纯粹的数据读写。

2、使用DVA进行数据分层管理
dva是基于 redux、redux-saga 和 react-router 的轻量级前端框架。
官网：https://dvajs.com/

首先，我们先将dva框架引入进来，由于umi对dva进行了整合，所以导入就变得非常简单了。在config.js文件中进行配置：

export default {
    plugins: [
        ['umi-plugin-react', {
            dva: true // 开启dva
        }]
    ]
};

接下来，创建model文件，在umi中，约定在src/models文件夹中定义model，所以，在该文件夹下创建ListData.js文件,编写内容:

export default {
    namespace: 'list',
    state: {
        data: [1, 2, 3],
        maxNum: 3
    },
    reducers : {
        addNewData(state){ //state是更新前的对象
            let maxNum = state.maxNum + 1;
            let list = [...state.data, maxNum];
            return { // 返回更新后的state对象
                data : list,
                maxNum : maxNum
            }
        }
    }
}

下面对之前写好的List.js进行改造：

import React from 'react'
import { connect } from 'dva';

const  namespace = "list";
//说明：第一个回调函数，作用：将page层和model层进行衔接，返回modle中的数据
//并且，将返回的数据，绑定到this.props

//接收第二个函数，这个函数的作用，将定义的函数绑定到this.props中，调用model层中定义的函数
@connect((state)=>{ //回调函数
    return{
        dataList :state[namespace].data,
        maxNum: state[namespace].maxNum,
    }
    },(dispatch) =>{//dispatch的作用，可以调用model层定义的函数
    return {//将放回的函数，绑定到this.props中
        add : function () {
            dispatch({//通过dispatch调用modle中定义的函数，通过type属性，指定函数命名，格式：namespace/函数名
                type : namespace+"/addNewData"
            })
        }
    }
})
class List extends React.Component{
    render(){
        return (
            <div>
                <ul>
                    { this.props.dataList.map((value,index) => { return <li key={index}>{value}</li>}) }
                </ul>
                <button onClick={()=>{
                        this.props.add();
                    }}>添加</button>
            </div>
        );
    }
}
export default List;

测试（可以看到效果是一样的）：
在这里插入图片描述
流程说明：

  1. umi框架启动，会自动读取models目录下model文件，即ListData.js中的数据
  2. @connect修饰符的第一个参数，接收一个方法，该方法必须返回{}，将接收到model数据
  3. 在全局的数据中，会有很多，所以需要通过namespace进行区分，所以通过state[namespace]进行获取数据
  4. 拿到model数据中的data，也就是[1, 2, 3]数据，进行包裹{}后返回
  5. 返回的数据，将被封装到this.props中，所以通过this.props.listData即可获取到model中的数据

点击按钮，需要修改state的值，流程梳理如下：
在这里插入图片描述
3、在model中请求数据
前面我的数据是写死在model中的，实际开发中，更多的是需要异步加载数据，那么在model中如何异步加载数据呢？
首先，创建src下创建util目录，并且创建request.js文件，输入如下内容：（用于异步请求数据）

function checkStatus(response) {
    if (response.status >= 200 && response.status < 300) { return response;
    }

    const error = new Error(response.statusText); error.response = response;
    throw error;
}

export default async function request(url, options) { const response = await fetch(url, options); checkStatus(response);
    return await response.json();
}

然后，在model中新增请求方法：

import request from '../util/request';

export default {
    namespace: 'list',
    state: {
        data: [],
        maxNum: 0
    },
    reducers : {
        addNewData(state,result){ //state是更新前的对象,result:请求到的数据
            if(result.data) {//如果state中存在data数据，直接返回，在做初始化的操作。
                return result.data;
            }
            let maxNum = state.maxNum + 1;
            let list = [...state.data, maxNum];
            return { // 返回更新后的state对象
                data : list,
                maxNum : maxNum
            }
        }
    },
    effects: { //新增effects配置，用于异步加载数据
        *initData(params, sagaEffects) { //定义异步方法
            const {call, put} = sagaEffects; //获取到call、put方法
            const url = "/ds/list"; // 定义请求的url
            let data = yield call(request, url); //执行请求
            yield put({ // 调用reducers中的方法
                type : "addNewData", //指定方法名
                data : data //传递ajax回来的数据
            });
        }
    }
}

改造页面逻辑：

import React from 'react'
import { connect } from 'dva';

const  namespace = "list";
//说明：第一个回调函数，作用：将page层和model层进行衔接，返回modle中的数据
//并且，将返回的数据，绑定到this.props

//接收第二个函数，这个函数的作用，将定义的函数绑定到this.props中，调用model层中定义的函数
@connect((state)=>{ //回调函数
    return{
        dataList :state[namespace].data,
        maxNum: state[namespace].maxNum,
    }
    },(dispatch) =>{//dispatch的作用，可以调用model层定义的函数
    return {//将放回的函数，绑定到this.props中
        add : function () {
            dispatch({//通过dispatch调用modle中定义的函数，通过type属性，指定函数命名，格式：namespace/函数名
                type : namespace+"/addNewData"
            })
        },
        initData : () => { //新增初始化方法的定义
            dispatch({
                type: namespace + "/initData"
            });
        }
    }
})
class List extends React.Component{
    componentDidMount(){
        this.props.initData(); //组件加载完后进行初始化操作
    }

    render(){
        return (
            <div>
                <ul>
                    { this.props.dataList.map((value,index) => { return <li key={index}>{value}</li>}) }
                </ul>
                <button onClick={()=>{
                        this.props.add();
                    }}>添加</button>
            </div>
        );
    }
}
export default List;

测试结果，发现会报错，原因是返回的数据不是json导致，解析出错。
在这里插入图片描述
查看下请求：
在这里插入图片描述
可以看到，返回的是html代码，所以会导致出错。

4、mock数据
umi中支持对请求的模拟，由于我们现在没有真正的服务可以返回数据，所以才需要模拟。在项目根目录下创建mock目录，然后创建MockListData.js文件，并且输入如下内容：

export default {
    'get /ds/list': function (req, res) { //模拟请求返回数据
        res.json({
        data: [1, 2, 3, 4,5,6],
        maxNum: 6
        });
    }
}

进行测试：
在这里插入图片描述
在这里插入图片描述
至此，ReactJS入们结束，开发时，首先要前后端约定好数据结构。

童话世界€
关注
专栏目录
一看就懂的ReactJs入门教程-精华版
aa124413278的博客
05-08 3307
　　现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS，ReactJs的虚拟DOM（VirtualDOM）和组件化的开发深深的吸引了我，下面来跟我一起领略ReactJs的风采吧~~ 文章有点长，耐心读完，你会有很大收获哦~ 一、ReactJS简介 　　React 起源于 Facebook 的内部项目，因为该公司对市场上所有 Jav...
50个开发人员都应该知道的 React.js 超级技巧（下）
最新发布
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-29 312
接上期的内容我们把后面剩下的25个内容分享完，希望这些内容能够对你有所帮助。26. 使用 useEffect 处理异步调用问题：您需要处理组件内的异步操作，例如，获取数据。解决方案：使用 `useEffect` 钩子来处理异步调用并管理组件生命周期。```jsx const DataFetcher = ({ url }) => { const [data, setData] = useSta...
ReactJs快速入门
qq_40794266的博客
10-30 303
ReactJs介绍: 官方一句很简单的话，道出了什么是ReactJS，就是，一个用于构建用户界面的JavaScript框架，是Facebook开发的一款的JS框架。ReactJS把复杂的页面，拆分成一个个的组件，将这些组件一个个的拼装起来，就会呈现多样的页面。 环境准备 安装UmiJS umi，中文可发音为乌米，是一个可插拔的企业级 react 应用框架。你可以将它简单的理解为一个专注...
ReactJS快速入门
weixin_52735772的博客
10-25 434
ReactJS基础知识 1.JSX语法 可以在js代码中插入html片段，是React自创的一种语法 JSX语法会被Babel等转码工具进行转码，成为正常的js代码再执行 JSX中所有的html标签必须是闭合的 在JSX中，只能存在一个根标签 如果在html标签中插入js代码，需通过{}插入 const d1 = <div>hello React.js</div> //true const d2 = <div>hello world //false export d
ES6新特性以及ReactJS入门.zip
10-10
**ReactJS入门** ReactJS是由Facebook开发的开源JavaScript库，用于构建用户界面，尤其适合构建单页应用。React的核心理念是组件化，将UI拆分成可复用的组件。 1. **JSX语法**：React引入了一种类似HTML的语法JSX...
ReactJs:ReactJs 入门练习
04-29
ReactJs 入门练习 需要先安装npm npm install browserify -g npm install --global babel ------Start------- To install React DOM and build your bundle after installing browserify: npm install --save react ...
ReactJs入门学习
04-23
在ReactJS入门学习中，首先需要理解的核心概念是虚拟DOM。虚拟DOM是一个轻量级的内存中数据结构，它允许React快速地计算出DOM的最小更新，而不是每次状态变化时都直接操作实际DOM，从而提高了性能。当你创建React...
React.js入门实例教程之创建hello world 的5种方式
10-22
React 是近期非常热门的一个前端开发框架。应用非常广泛，接下来通过本文给大家介绍React.js入门实例教程之创建hello world 的5种方式 ，需要的朋友参考下吧
reactJs 入门学习
ygy211715的博客
01-14 331
1：首先安装搭建react项目所需的环境 1：打开cmd命令行，首先安装node 步骤：https://nodejs.org/en/download/      node官网，选择跟自己的电脑匹配的版本进行下载，然后一步步的安装即可，输入node -v，如果出现版本信息即表示安装成功。 2：npm包管理器是集成在node中的，所以直接输入npm -v就能查看到版本信息 3:：选择一个位置用...
React.js入门教程
m0_75198698的博客
05-03 1031
React常用的UI组件库有Ant Design、Element-UI、Material-UI、Bootstrap等，这些组件库可以大大加快我们的开发速度，同时也提供了丰富的组件和样式供我们使用。Ant Design是一个由蚂蚁金服开发的React UI组件库，它包含了各种常用的UI组件和样式，可以帮助我们快速搭建美观、易用的Web应用。通常用于在组件渲染之前执行一些操作。Element-UI是一个由饿了么开发的React UI组件库，它包含了众多常用的UI组件和样式，同时也提供了灵活的主题定制功能。
React.js快速入门教程
study_way的博客
01-21 2817
React.js是一个由Facebook开发的用于构建用户界面的JavaScript库。它主要用于构建单页面应用程序（SPA），可以轻松地创建交互性强、快速响应的用户界面。React.js的特点1.声明式设计 −React采用声明范式，可以轻松描述应用。2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。3.灵活 −React可以与已知的库或框架很好地配合。4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。
reactJS 入门搭建环境
p526881709的博客
02-26 319
打开react 网址：https://react.docschina.org/docs/create-a-new-react-app.html 点击文档tab： 点击右侧的安装——使用react开发新项目，往下翻可以看到红框内的命令行，在你想创建项目的地方按住shift+右键单击——在此处打开命令行，输入 npx create-react-app my-app （my-app是你创建的文件...
快速学习ReactJS-快速入门
逍遥云恋
01-18 491
2.4 React快速入门 2.4.1、JSX语法 JSX语法就是，可以在js文件中插入html片段，是React自创的一种语法。JSX语法会被Babel等转码工具进行转码，得到正常的js代码再执行。 使用JSX语法，需要2点注意： 所有的html标签必须是闭合的，如： hello world 写成这样是不可以的： hello world 在JSX语法中，只能有一个根标签，不能有多个。 ...
入门指南：从零开始学习ReactJS
热门推荐
努力是为了站在万人之中，成为别人的光
04-23 2万+
ReactJS是一个强大的JavaScript库，用于构建用户界面。它由Facebook开发，并于2013年首次发布。自那时以来，React已成为前端开发中最受欢迎的库之一，许多公司和开发者都在使用它来构建高性能、交互式的Web应用程序。本文将向您介绍ReactJS的基础知识，并通过实践示例来帮助您入门。我们将从React的核心概念开始，逐步深入，直到您能够构建简单的React应用为止。
深入理解ES6：ReactJS入门基础
"本课程为ReactJS入门学习，首先介绍了ES6的新特性，因为ES6在现代前端框架如ReactJS中扮演着重要角色。ES6是ECMAScript 6的简称，是JavaScript语言的下一代标准，于2015年发布，旨在支持更复杂的大型应用开发。课程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值