React基础入门知识记录

何处锦绣不灰堆

发布于 2023-10-18 17:41:34

1900

发布于 2023-10-18 17:41:34

文章被收录于专栏：农历七月廿一

写在前面

因为鄙人技术栈主要是vue的前端开发，所以一直没有更新除vue技术栈之外的一些文章，但是我虽然是写vue的，同时我也是一名前端开发啊，作为一名合格的前端开发怎么可以允许自己不去了解一下react呢，毕竟用户体量那么大的框架，再加上我也着实很久没有更新了，趁着这次的正常更新回归，我们就从react开始吧！！！

知识点代码展示

代码基础框架

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>React演示-ClearLove</title>
		<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
		<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
		<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
	</head>
	<body>
	<!-- 下面例子中代码实现的位置 -->
	</body>
</html>

JSX

		<div id="app"></div>
		<script>
			let hello = React.createElement('h1', {
				className: 'div_red'
			}, 'Hello World')
			ReactDOM.render(hello, document.getElementById('app'))
		</script>
		<!-- jsx 语法 在js中写html的语法 也可以在html中写js的语法 -->
		<div id="app1"></div>
		<script type="text/babel">
			let domName = 'clearlove'
			let template = <h1 className='div_red'>Hello {domName}</h1>
			ReactDOM.render(template,document.getElementById('app1'))
		</script>

函数式（无状态）组件创建

<!-- 函数式组件声明 -->
	<div id="app"></div>
	<script type="text/babel">
		function Hello(){
			let template = <h1>Hello World</h1>
			return template
		}
		ReactDOM.render(<Hello/>,document.getElementById('app'))
	</script>

继承式（有状态）组件创建

<!-- 有状态组件创建  使用Class的方式进行继承React.Component -->
	<div id="app"></div>
	<script type="text/babel">
		class Hello extends React.Component{
			render(){
				return <h1>Hello World</h1>
			}
		}
		ReactDOM.render(<Hello/>,document.getElementById('app'))
	</script>

函数式（无状态）组件传值

<!-- 函数式组件传值  只需要在组件上进行定义对应的属性 在组件中直接获取即可 -->
	<div id="app"></div>
	<script type="text/babel">
		function Hello(props){
			let template = <h1>Hello {props.tName}</h1>
			return template
		}
		ReactDOM.render(<Hello tName="clearlove"/>,document.getElementById('app'))
	</script>

继承式（有状态）组件传值

<!-- 有状态组件创建  使用Class的方式进行继承React.Component 传值的时候需要进行this.props.属性 -->
	<div id="app"></div>
	<script type="text/babel">
		class Hello extends React.Component{
			render(){
				return <h1>Hello {this.props.cName}</h1>
			}
		}
		ReactDOM.render(<Hello cName="clearlove"/>,document.getElementById('app'))
	</script>

组件事件处理

<!-- 有状态组件创建  使用Class的方式进行继承React.Component -->
		<div id="app"></div>
		<script type="text/babel">
			class Hello extends React.Component{
			constructor(){
				super()
				// 这里需要注意的是 this的使用是不可以在super之前的
				this.state = {
					cName:'clearlove'
				}
			}
			// 更新数据的函数  这里用箭头函数进行声明就不用处理this指向的问题
			updateInfo = ()=>{
				this.setState({
					cName : 'wlm'
				})
			}
			// 如果不用箭头函数进行声明的时候  这里的this指向是需要手动更新的
			updateInfoNotByJ() {
				this.setState({
					cName : 'lll'
				})
			}
			render(){
				return <div>
				<h1>Hello {this.state.cName}</h1>
				<button onClick={this.updateInfo}>更新数据</button>
				<button onClick={this.updateInfoNotByJ.bind(this)}>再次更新数据(这里直接进行更改this指向)</button>
				<button onClick={()=> this.updateInfoNotByJ()}>再再次更新数据(别忘记添加小括号)</button>
				</div> 
			}
		}
		ReactDOM.render(<Hello/>,document.getElementById('app'))
	</script>

组件列表渲染

<!-- 列表渲染的时候可以使用for或者一些js循环的方式进行，这里没有vue中的类似v-for的一些指令可以用 -->
		<div id="app"></div>
		<script type="text/babel">
			class Hello extends React.Component{
			state = {
				list : ['one','two','three']
			}
			render(){
				const {list} = this.state
				const lists = []
				// 这里需要进行添加对应的key 用法是个vue中的用处基本上是一致的
				list.map((item,index)=>{
					lists.push(<li key={index}>{item}</li>) 
				})
				return <div>
					<ul>
						{lists}
					</ul>
				</div> 
			}
		}
		ReactDOM.render(<Hello/>,document.getElementById('app'))
	</script>

组件条件判断

<!-- 条件渲染的时候也是需要进行js处理的，因为当前的react是没有v-if的写法的 -->
		<div id="app"></div>
		<script type="text/babel">
			function Right(){
				return <h1>RIGHT</h1>
			}
			function Error(){
				return <h1>ERROR</h1>
			}
			
			class Hello extends React.Component{
			state = {
				isRight : false
			}
			// 更改当前state中变量状态的函数
			updateState = ()=>{
				this.setState({
					isRight : !this.state.isRight
				})
			}
			render(){
				const {isRight} = this.state
				return <div>
						{isRight ? <Right/> : <Error/>} 
						<button onClick={this.updateState}>更改状态</button>
				</div> 
			}
		}
		ReactDOM.render(<Hello/>,document.getElementById('app'))
	</script>

注意点

有无状态的组件的使用场景是不同的，如果你的功能相对比较单一，数据操作并不多的情况下，我们默认是使用无状态组件的，所谓的无状态组件就是没有对应的生命周期函数，也没有对应的state的声明，我们使用的时候是比较简单暴力的，直接props.属性即可
上面的例子都是一些很基础的例子，但是工作中写一般也都是这么实现的，基础功能的实现只要注意相应的点即可
如果你觉得看起来比较费力的话，那有可能是我这边写的不够详细，另一种可能就是可能你对除react之外的一些框架也不是很了解，所以接受起来会相对难一点，相信但凡写过类似框架的，上面的例子都是一些很基础的例子

写在最后

react给我的感觉是他的写法开始不太容易接受，特别是写vue习惯的人，因为他的一些写法让我觉得怪，特别是jsx的时候，但是当我尝试写一些组件的时候，进行组件之间传值的时候发现他其实是比vue还要更加方便的，当然这些都是一些很简单和基础的用法，后面的父子之间的函数调用和hooks等用法只能后面进行更新，感谢阅读！！！

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2023-05-26，如有侵权请联系 cloudcommunity@tencent.com 删除

react