React 全栈体系（四）

已于 2023-09-11 22:16:18 修改
阅读量960 收藏
点赞数
分类专栏： React全栈体系 文章标签： react.js 前端 javascript
于 2023-09-07 21:23:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sgsgkxkx/article/details/132630250
版权

第二章 React 面向组件编程

六、组件的生命周期

1. 效果

  • 需求: 定义组件实现以下功能：
    • 让指定的文本做显示 / 隐藏的渐变动画
    • 从完全可见，到彻底消失，耗时 2S
    • 点击“不活了”按钮从界面中卸载组件

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>1_引出生命周期</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		//生命周期回调函数 <=> 生命周期钩子函数 <=> 生命周期函数 <=> 生命周期钩子
		class Life extends React.Component{

			state = {opacity:1}

			death = ()=>{
				//卸载组件
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}

			//组件挂载完毕
			componentDidMount(){
				console.log('componentDidMount');
				this.timer = setInterval(() => {
					//获取原状态
					let {opacity} = this.state
					//减小0.1
					opacity -= 0.1
					if(opacity <= 0) opacity = 1
					//设置新的透明度
					this.setState({opacity})
				}, 200);
			}

			//组件将要卸载
			componentWillUnmount(){
				//清除定时器
				clearInterval(this.timer)
			}

			//初始化渲染、状态更新之后
			render(){
				console.log('render');
				return(
					<div>
						<h2 style={{opacity:this.state.opacity}}>React学不会怎么办？</h2>
						<button onClick={this.death}>不活了</button>
					</div>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Life/>,document.getElementById('test'))
	</script>
</body>
</html>

2. 理解

  • 组件从创建到死亡它会经历一些特定的阶段。
  • React 组件中包含一系列勾子函数(生命周期回调函数), 会在特定的时刻调用。
  • 我们在定义组件时，会在特定的生命周期回调函数中，做特定的工作。

3. 生命周期流程图(旧)

请添加图片描述

  • 生命周期的三个阶段（旧）
3.1 初始化阶段: 由 ReactDOM.render()触发—初次渲染
  • constructor()
  • componentWillMount()
  • render()
  • componentDidMount()
3.2 更新阶段: 由组件内部 this.setSate()或父组件重新 render 触发
  • shouldComponentUpdate()
  • componentWillUpdate()
  • render()
  • componentDidUpdate()
3.3 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发
  • componentWillUnmount()
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>2_react生命周期(旧)</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/babel.min.js"></script>

	<script type="text/babel">
		/*
				1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
									1.	constructor()
									2.	componentWillMount()
									3.	render()
									4.	componentDidMount() =====> 常用
													一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
				2. 更新阶段: 由组件内部this.setSate()或父组件render触发
									1.	shouldComponentUpdate()
									2.	componentWillUpdate()
									3.	render() =====> 必须使用的一个
									4.	componentDidUpdate()
				3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
									1.	componentWillUnmount()  =====> 常用
													一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
		*/
		//创建组件
		class Count extends React.Component{

			//构造器
			constructor(props){
				console.log('Count---constructor');
				super(props)
				//初始化状态
				this.state = {count:0}
			}

			//加1按钮的回调
			add = ()=>{
				//获取原状态
				const {count} = this.state
				//更新状态
				this.setState({count:count+1})
			}

			//卸载组件按钮的回调
			death = ()=>{
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}

			//强制更新按钮的回调
			force = ()=>{
				this.forceUpdate()
			}

			//组件将要挂载的钩子
			componentWillMount(){
				console.log('Count---componentWillMount');
			}

			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

			//组件将要卸载的钩子
			componentWillUnmount(){
				console.log('Count---componentWillUnmount');
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('Count---shouldComponentUpdate');
				return true
			}

			//组件将要更新的钩子
			componentWillUpdate(){
				console.log('Count---componentWillUpdate');
			}

			//组件更新完毕的钩子
			componentDidUpdate(){
				console.log('Count---componentDidUpdate');
			}

			render(){
				console.log('Count---render');
				const {count} = this.state
				return(
					<div>
						<h2>当前求和为：{count}</h2>
						<button onClick={this.add}>点我+1</button>
						<button onClick={this.death}>卸载组件</button>
						<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
					</div>
				)
			}
		}

		//父组件A
		class A extends React.Component{
			//初始化状态
			state = {carName:'奔驰'}

			changeCar = ()=>{
				this.setState({carName:'奥拓'})
			}

			render(){
				return(
					<div>
						<div>我是A组件</div>
						<button onClick={this.changeCar}>换车</button>
						<B carName={this.state.carName}/>
					</div>
				)
			}
		}

		//子组件B
		class B extends React.Component{
			//组件将要接收新的props的钩子
			componentWillReceiveProps(props){
				console.log('B---componentWillReceiveProps',props);
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('B---shouldComponentUpdate');
				return true
			}
			//组件将要更新的钩子
			componentWillUpdate(){
				console.log('B---componentWillUpdate');
			}

			//组件更新完毕的钩子
			componentDidUpdate(){
				console.log('B---componentDidUpdate');
			}

			render(){
				console.log('B---render');
				return(
					<div>我是B组件，接收到的车是:{this.props.carName}</div>
				)
			}
		}

		//渲染组件
		ReactDOM.render(<Count/>,document.getElementById('test'))
	</script>
</body>
</html>

4. 生命周期流程图(新)

在这里插入图片描述

  • 生命周期的三个阶段（新）
4.1 初始化阶段: 由 ReactDOM.render()触发—初次渲染
  • constructor()
  • getDerivedStateFromProps
  • render()
  • componentDidMount()
4.2 更新阶段: 由组件内部 this.setSate()或父组件重新 render 触发
  • getDerivedStateFromProps
  • shouldComponentUpdate()
  • render()
  • getSnapshotBeforeUpdate
  • componentDidUpdate()
4.3 卸载组件: 由 ReactDOM.unmountComponentAtNode()触发
  • componentWillUnmount()
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>3_react生命周期(新)</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

	<script type="text/babel">
		//创建组件
		class Count extends React.Component{
			/*
				1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
								1.	constructor()
								2.	getDerivedStateFromProps
								3.	render()
								4.	componentDidMount() =====> 常用
											一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
				2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
								1.	getDerivedStateFromProps
								2.	shouldComponentUpdate()
								3.	render()
								4.	getSnapshotBeforeUpdate
								5.	componentDidUpdate()
				3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
								1.	componentWillUnmount()  =====> 常用
											一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
			*/
			//构造器
			constructor(props){
				console.log('Count---constructor');
				super(props)
				//初始化状态
				this.state = {count:0}
			}

			//加1按钮的回调
			add = ()=>{
				//获取原状态
				const {count} = this.state
				//更新状态
				this.setState({count:count+1})
			}

			//卸载组件按钮的回调
			death = ()=>{
				ReactDOM.unmountComponentAtNode(document.getElementById('test'))
			}

			//强制更新按钮的回调
			force = ()=>{
				this.forceUpdate()
			}

			//若state的值在任何时候都取决于props，那么可以使用getDerivedStateFromProps
			static getDerivedStateFromProps(props,state){
				console.log('getDerivedStateFromProps',props,state);
				return null
			}

			//在更新之前获取快照
			getSnapshotBeforeUpdate(){
				console.log('getSnapshotBeforeUpdate');
				return 'atguigu'
			}

			//组件挂载完毕的钩子
			componentDidMount(){
				console.log('Count---componentDidMount');
			}

			//组件将要卸载的钩子
			componentWillUnmount(){
				console.log('Count---componentWillUnmount');
			}

			//控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('Count---shouldComponentUpdate');
				return true
			}

			//组件更新完毕的钩子
			componentDidUpdate(preProps,preState,snapshotValue){
				console.log('Count---componentDidUpdate',preProps,preState,snapshotValue);
			}

			render(){
				console.log('Count---render');
				const {count} = this.state
				return(
					<div>
						<h2>当前求和为：{count}</h2>
						<button onClick={this.add}>点我+1</button>
						<button onClick={this.death}>卸载组件</button>
						<button onClick={this.force}>不更改任何状态中的数据，强制更新一下</button>
					</div>
				)
			}
		}

		//渲染组件
		ReactDOM.render(<Count count={199}/>,document.getElementById('test'))
	</script>
</body>
</html>

请添加图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>4_getSnapShotBeforeUpdate的使用场景</title>
	<style>
		.list{
			width: 200px;
			height: 150px;
			background-color: skyblue;
			overflow: auto;
		}
		.news{
			height: 30px;
		}
	</style>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

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

			state = {newsArr:[]}

			componentDidMount(){
				setInterval(() => {
					//获取原状态
					const {newsArr} = this.state
					//模拟一条新闻
					const news = '新闻'+ (newsArr.length+1)
					//更新状态
					this.setState({newsArr:[news,...newsArr]})
				}, 1000);
			}

			getSnapshotBeforeUpdate(){
				return this.refs.list.scrollHeight
			}

			componentDidUpdate(preProps,preState,height){
				this.refs.list.scrollTop += this.refs.list.scrollHeight - height
			}

			render(){
				return(
					<div className="list" ref="list">
						{
							this.state.newsArr.map((n,index)=>{
								return <div key={index} className="news">{n}</div>
							})
						}
					</div>
				)
			}
		}
		ReactDOM.render(<NewsList/>,document.getElementById('test'))
	</script>
</body>
</html>

5. 重要的勾子

  • render：初始化渲染或更新渲染调用
  • componentDidMount：开启监听，发送 ajax 请求
  • componentWillUnmount：做一些收尾工作，如：清理定时器

6. 即将废弃的勾子

  • componentWillMount
  • componentWillReceiveProps
  • componentWillUpdate

现在使用会出现警告，下一个大版本需要加上 UNSAFE_前缀才能使用，以后可能会被彻底废弃，不建议使用。

七、虚拟 DOM 与 DOM Diffing 算法

1. 效果

请添加图片描述

2. 基本原理图

请添加图片描述

3. 代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>1_验证diff算法</title>
</head>
<body>
	<!-- 准备好一个“容器” -->
	<div id="test"></div>

	<!-- 引入react核心库 -->
	<script type="text/javascript" src="../js/17.0.1/react.development.js"></script>
	<!-- 引入react-dom，用于支持react操作DOM -->
	<script type="text/javascript" src="../js/17.0.1/react-dom.development.js"></script>
	<!-- 引入babel，用于将jsx转为js -->
	<script type="text/javascript" src="../js/17.0.1/babel.min.js"></script>

	<script type="text/babel">
		class Time extends React.Component {
			state = {date: new Date()}

			componentDidMount () {
				setInterval(() => {
					this.setState({
						date: new Date()
					})
				}, 1000)
			}

			render () {
				return (
					<div>
						<h1>hello</h1>
						<input type="text"/>
						<span>
							现在是：{this.state.date.toTimeString()}
							<input type="text"/>
						</span>
					</div>
				)
			}
		}

		ReactDOM.render(<Time/>,document.getElementById('test'))
</script>
</body>
</html>

请添加图片描述
请添加图片描述
请添加图片描述

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>2_key的作用</title>
</head>
<body>
<div id="test"></div>
<!-- 引入react核心库 -->
<script type="text/javascript" src="../js/react.development.js"></script>
<!-- 引入react-dom -->
<script type="text/javascript" src="../js/react-dom.development.js"></script>
<!-- 引入babel -->
<script type="text/javascript" src="../js/babel.min.js"></script>

<script type="text/babel">
	/*
   经典面试题:
      1). react/vue中的key有什么作用？（key的内部原理是什么？）
      2). 为什么遍历列表时，key最好不要用index?

			1. 虚拟DOM中key的作用：
					1). 简单的说: key是虚拟DOM对象的标识, 在更新显示时key起着极其重要的作用。

					2). 详细的说: 当状态中的数据发生变化时，react会根据【新数据】生成【新的虚拟DOM】,
												随后React进行【新虚拟DOM】与【旧虚拟DOM】的diff比较，比较规则如下：

									a. 旧虚拟DOM中找到了与新虚拟DOM相同的key：
												(1).若虚拟DOM中内容没变, 直接使用之前的真实DOM
												(2).若虚拟DOM中内容变了, 则生成新的真实DOM，随后替换掉页面中之前的真实DOM

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

			2. 用index作为key可能会引发的问题：
								1. 若对数据进行：逆序添加、逆序删除等破坏顺序操作:
												会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。

								2. 如果结构中还包含输入类的DOM：
												会产生错误DOM更新 ==> 界面有问题。

								3. 注意！如果不存在对数据的逆序添加、逆序删除等破坏顺序操作，
									仅用于渲染列表用于展示，使用index作为key是没有问题的。

			3. 开发中如何选择key?:
								1.最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。
								2.如果确定只是简单的展示数据，用index也是可以的。
   */

	/*
		慢动作回放----使用index索引值作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=0>小张---18<input type="text"/></li>
					<li key=1>小李---19<input type="text"/></li>

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

	-----------------------------------------------------------------

	慢动作回放----使用id唯一标识作为key

			初始数据：
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			初始的虚拟DOM：
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></li>

			更新后的数据：
					{id:3,name:'小王',age:20},
					{id:1,name:'小张',age:18},
					{id:2,name:'小李',age:19},
			更新数据后的虚拟DOM：
					<li key=3>小王---20<input type="text"/></li>
					<li key=1>小张---18<input type="text"/></li>
					<li key=2>小李---19<input type="text"/></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:[p,...persons]})
		}

		render(){
			return (
				<div>
					<h2>展示人员信息</h2>
					<button onClick={this.add}>添加一个小王</button>
					<h3>使用index（索引值）作为key</h3>
					<ul>
						{
							this.state.persons.map((personObj,index)=>{
								return <li key={index}>{personObj.name}---{personObj.age}<input type="text"/></li>
							})
						}
					</ul>
					<hr/>
					<hr/>
					<h3>使用id（数据的唯一标识）作为key</h3>
					<ul>
						{
							this.state.persons.map((personObj)=>{
								return <li key={personObj.id}>{personObj.name}---{personObj.age}<input type="text"/></li>
							})
						}
					</ul>
				</div>
			)
		}
	}

	ReactDOM.render(<Person/>,document.getElementById('test'))
</script>
</body>
</html>
柠檬小帽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
基于 koa+react+mysql 的全栈项目开发
06-10
本项目“基于 koa+react+mysql 的全栈项目开发”就是一个很好的例子，它结合了JavaScript的Node.js框架Koa、前端库React以及关系型数据库MySQL，构建了一个完整的Web应用体系。下面我们将详细探讨这三个关键技术及其...
React 全栈体系（一）
柠檬小帽的博客 - 计算机全栈体系
08-11 2161
React 入门
Next.js: React 全栈框架
学习笔记
02-06 868
Next.js 是构建在React 之上的用于生产的 React 框架。 有几个特点： Next.js 具有内建的对服务端渲染的支持 file-based routing 是一个全栈框架 创建 next app 首先需要安装node，然后运行命令： npx create-next-app@latest 命令 Next.js 文档上有。 然后启动 server： npm run dev demo project：在pages文件夹中新建两个文件，index.js 和 news.js news.js 代
2024年React全家桶(技术栈)_react全家桶包括哪些技术，2024年最新大数据开发模块化面向接口编程
最新发布
2401_84166811的博客
05-09 589
1.
React全栈--现代前端技术
weixin_33804582的博客
02-15 142
1.ES6-- 新一代JavaScript标准 1.1 const和let关键字 以前只有全局变量以及函数内部的局部变量，所以以前的局部变量只能定义在函数里面，但是现在不是了，可以通过let关键字来定义局部变量。同时通过const关键字来定义常量，定义后的基本类型数据是不能改变的，但是定义的是引用类型的变量的话，还是可以改变的。 1.2 ...
react全栈_部署全栈React应用
weixin_26752759的博客
09-14 300
react全栈 部署全栈React应用 (Deploying Your Full Stack React App)One of the greatest things about programming is that there are a huge number of ways to do things. There often is no right or wrong way. I wou...
全栈公开课教程
01-01
在这个“全栈公开课教程”中，你将有机会学习到一套完整的全栈开发知识体系，包括前端技术、后端架构、大数据处理以及网络爬虫的实践技巧。 首先，前端技术是用户与应用交互的桥梁，主要涉及HTML、CSS和JavaScript...
FOT全栈工程师.docx
08-11
FOT公司正在招聘一位全栈工程师，特别强调了对于React JS, React Native和TypeScript的熟练掌握，同时也提及了NodeJS的相关技能。这份远程工作的核心在于利用技术实现高效虚拟团队协作。以下是对这个职位的详细解析...
react全家桶资料.zip
03-30
React全栈开发，通常被称为"React全家桶"，是指使用React.js库以及与其相关的各种工具和技术，构建完整的前端应用的体系。React作为一个流行的JavaScript库，主要用于构建用户界面，特别是单页应用程序（SPA）。本...
后端 （Java Golang）全栈知识架构体系总结.zip
03-03
本资源“后端（Java Golang）全栈知识架构体系总结.zip”聚焦于两种广泛使用的后端编程语言——Java和Golang，提供了一个全面的学习路径，帮助开发者构建全栈技能。 首先，让我们关注Java。Java是一种面向对象的、...
React 全栈 pdf
12-21
React全栈 JSX Redux Flux webpack Babel整合开发 pdf
【React】React全栈脚手架搭建
吴纯玲的博客
09-28 641
先贴上代码地址：https://gitee.com/wuchunling/reactApp  最终效果图： react全栈脚手架的搭建：react / redux / react-router-dom / less / axios / storybook UI框架：react 数据管理：redux 路由：react-router-dom  样式：less 异步请求：axios ...
react-native全栈项目搭建
吴纯玲的博客
11-09 2103
先贴上最终成果代码地址：https://gitee.com/wuchunling/reactNativeApp.git 再贴上最终最终成果效果图：（在Android模拟器运行效果图） reactNativeApp 项目介绍 这是一个搭建好的react native项目架构，采用react-native官方推荐的react-navigation导航库，项目StackNavigator与T...
最新方糖全栈课·PHP+React大系 价值3000元
qq_43679553的博客
11-14 517
适用人群 希望以编程为职业的计算机相关专业毕业生 希望从传统软件、测试等岗位转向互联网开发的同学   课程概述 方糖全栈课是由方糖气球出品的国内首个多职位全栈课程。它一套课程覆盖PHP、前端和区块链应用开发三大热门职位，知原理、重实践，让你在15周内从零基础的初学者成长为一个能同时开发云和端的全栈高手（好吧，其实是中级选手，高手还是要自己再多练几个项目）。   课程服务支持 &a...
React全栈SPA项目
xuan2717的博客
06-18 708
目录： 01_最终版项目_启动和功能说明.mp4 02_开发准备_项目描述.avi 03_开发准备_技术选型.avi 04_开发准备_API接口.avi 05_开发准备_其它.avi 06_使用脚手架创建项目并运行.avi 07_使用git管理项目.avi 08_项目源码基本目录设计.avi 09_引入antd.avi 10_引入路由.av...
react 全栈概念学习
weixin_44677431的博客
05-17 626
// 为什么要用next.js 因为前端框架如react,angular是把js加载到浏览器之后，再去渲染出内容的，这样会导致： 1.首屏展示速度慢 2.无法seo 3.初始数据只能向服务器请求 而这些问题，在同构项目中都可以解决。 // react16本身推出了server runder工具实现服务器端渲染，但是它的构建太复杂，所以目前选择next.js做react的同构项目，是非常好的选择。 ...
【全栈React】第1天：什么是React？
小秋博客
08-03 531
感谢“众成翻译”授权发布。 原文链接：What is React? 译者： iOSDevLog 译文链接：【全栈React】第1天：什么是 React? 责编：陈秋歌，寻求报道或者投稿请发邮件至chenqg#csdn.net。 导读：《全栈React》系列包含30多篇文章，带你循序渐进的学习React。它从最基本知识开始，逐渐贯穿你需要了解的所有内容。如果你想学习R...
【招聘App】—— React/Nodejs/MongoDB全栈项目：信息完善&用户列表
柳柳66的博客
01-23 237
【招聘App】—— React/Nodejs/MongoDB全栈项目：信息完善&amp;用户列表 前言：最近在学习Redux+react+Router+Nodejs全栈开发高级课程，这里对实践过程作个记录，方便自己和大家翻阅。最终成果github地址：https://github.com/66Web/react-antd-zhaoping，欢迎st...
尚硅谷 React 全栈项目硅谷直聘1
08-03
在技术实现方面，前端使用了React全家桶，包括了React框架、Redux状态管理、React Router路由等，这些技术的使用使得前端页面的数据管理和路由控制更加高效。同时，ES6和Webpack的应用也提升了前端代码的可维护性和...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

柠檬小帽

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

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

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

打赏作者

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

抵扣说明：

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

余额充值