【React全家桶】react简介（一）

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6

react简介

用于构建用户界面的JavaScript库只关注页面将数据渲染为HTML视图

官网react官方网站

React可以克服原生JS的以下缺点

1.原生JS操作DOM繁琐且效率低因为用DOM-API操作UI
2.JS直接操作DOM会使浏览器进行大量的重绘重排
3.原生JS没有组件化编码方案代码复用率低

创建项目creat-react-app

全局安装creact-react-app

npm install -g create-react-app

创建一个个 项目

create-react-app mji
1.1 React特点

  • 采用组件化模式声明式编码提高开发效率及组件复用率;

  • 在React Native中可以使用React语法进行_移动端开发_

  • 使用虚拟DOM+优秀的Diffing算法尽量减少与真实DOM的交互。

1.2 引入文件

react.js 核心库核心库要在react-dom之前引入

react-dom.js 提供操作DOM的react扩展库

babel.min.js解析JSX语法代码转为JS代码的库即ES6==>ES5;JSX==>JS

1.3 JSX

全称: JavaScript XML是react定义的一种类似于XML的JS扩展语法本质是React.createElement(component, props, …children)方法的语法

1.3.1 为什么要用JSX
  1. 更加简单地创建虚拟DOM

1使用JSX创建虚拟DOM

2使用JS创建虚拟DOM用原生JS不用babel开发中不使用

  1. JSX创建虚拟DOM的方法是JS方法的语法糖
1.3.2 JSX语法规则

定义虚拟DOM时不用写引号

标签中混入JS表达式时要用{}

前端js框架列表

{
data.map((item,index)=>{
return
{item}
})
}
)
  1. CSS类名指定不用class用className
  2. 内联样式style={{keyvalue}}如style={{color‘white’fontSize20px}}
  3. 虚拟DOM必须只有一个根标签
  4. 标签必须闭合如
  5. 标签首字母
    1若小写字母开头则转为html5中的同名元素如无则报错
    2若大写字母开头react就去渲染对应的组件若组件没有定义则报错
1.4 虚拟DOM
  1. 本质是Object即一般对象不是数组对象和函数对象
  2. 虚拟DOM比较“轻”真实DOM比较“重”因为虚拟DOM是react内部在用无需真实DOM中那么多属性
  3. 虚拟DOM最终会被react转换为真实DOM呈现在页面上
1.5 模块与组件
1.5.1 模块
  1. 向外界提供特定功能的js程序。随着业务逻辑增加代码越来越多且复杂此时js一般会拆成多个js文件来编写一般一个js文件就是一个模块
  2. 作用复用js简化js的编写提高js的运行效率
  3. 模块化当应用的js都以模块来编写的, 这个应用就是一个模块化的应用

React面向组件编程

2.1 创建组件
2.1.1 函数式组件

适用于简单组件无state

<script type="text/babel">
		// 创建函数组件
		function MyComponent(){
			return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2>
		}
		//2.渲染组件到页面
		ReactDOM.render(<MyComponent/>,document.getElementById('test'))
	</script>
2.1.2 类式组件

适用于复杂组件有state

<script type="text/babel">
		//1.创建类式组件
		class MyComponent extends React.Component {
			render(){
				return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2>
			}
		}
		//2.渲染组件到页面
	ReactDOM.render(<MyComponent/>,document.getElementById('test'))
​</script>

注意事项

1.类式组件必须要继承react的内值类React.Component
2.一定要写render函数且要有返回值
3.render是放在类的原型对象上供实例使用。
4.render中的this指向类的实例对象原因见下方 <=> 类式组件的实例对象。

2.2 组件实例的三大属性

针对于类式组件hooks可以让函数式组件也有三大属性

2.2.1 state属性

state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合) 组件被称为"状态机",
通过更新组件的state来更新对应的页面显示(重新渲染组件)

注意事项

  • 在构造器constructor中初始化state且要用对象形式初始化state

  • 在render函数中创建虚拟DOM时直接在标签中绑定事件且事件写法不同于原生JS如原生JS中的onclick事件在react中要写成onClick其他同理。

  • onClick={this.changeWeather}是将this.changeWeather函数赋值给onClick函数后面不能加括号否则就是将函数返回值赋值

    注意 状态必须通过setState以对象的形式进行更新,且更新是一种合并不是替换

  • const {isHot,wind} = this.state是ES6中的对象解构获取多个对象属性的方法

<script type="text/babel">
		//1.创建组件
		class Weather extends React.Component{
			//初始化状态 类里可以直接写赋值语句相当于追加属性值写死
			state = {isHot:false,wind:'微风'}
		render(){
			const {isHot,wind} = this.state
			return <h1 onClick={this.changeWeather}>今天天气很{isHot ? '炎热' : '凉爽'}{wind}</h1>
		}

		//自定义方法————要用赋值语句的形式+箭头函数
		// changeWeather从原型上移到实例对象自身外层函数的this就是箭头函数的this
		changeWeather = ()=>{
			const isHot = this.state.isHot
			this.setState({isHot:!isHot})
		}
	}
	//2.渲染组件到页面
	ReactDOM.render(<Weather/>,document.getElementById('test'))

注意事项

  1. 类里可以直接写赋值语句相当于追加属性值写死所以state可以直接在类里通过赋值的形式初始化而不是在构造函数中
    自定义回调函数的指向可以通过将箭头函数赋值的方式从原型上转移到实例对象自身箭头函数中this指向外层函数中的this这里即为实例对象
    强烈注意

  2. 组件中render方法中的this为组件实例对象
    组件自定义的方法中this为undefined如何解决
    a) 强制绑定this: 通过函数对象的bind()
    可在constructor中用bind也可在绑定事件函数时用bind即onClick={this.changeWeather。bind(this)
    b) 箭头函数
    状态数据不能直接修改或更新

2.2.2 props属性
  1. 作用通过标签属性创建虚拟DOM时直接添加的数据从组件外向组件内传递变化的数据
  2. 传递props即传递标签属性props批量传递标签属性
  3. 每个组件对象都会有props(properties的简写)属性
  4. 组件标签的所有属性都保存在props中
  5. 注意: 组件内部不要修改props数据
<script type="text/babel">        //创建组件        class Person extends React.Component{            render(){                // console.log(this);                const {name,age,sex} = this.props                return (                    <ul>                        <li>姓名{name}</li>                        <li>性别{sex}</li>                        <li>年龄{age+1}</li>                    </ul>                )            }        }        //渲染组件到页面    ReactDOM.render(<Person name="jerry" age={19}  sex="男" speak={speak}/>,document.getElementById('test1'))        ReactDOM.render(<Person name="tom" age={18} sex="女"/>,document.getElementById('test2'))            const p = {name:'老刘',age:18,sex:'女'}    ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
function speak(){
	console.log('我说话了');
}
</script>

对props进行限制

首先要引入prop-types库用于对组件标签属性进行限制

限制props有两种方法

a限制内容写在类外面

Person.propTypes = {
			name:PropTypes.string.isRequired, //限制name必传且为字符串
			sex:PropTypes.string,//限制sex为字符串
			age:PropTypes.number,//限制age为数值
			speak:PropTypes.func,//限制speak为函数
		}
		//指定默认标签属性值
Person.defaultProps = {
	sex:'男',//sex默认值为男
	age:18 //age默认值为18
}

b限制内容写在类里面

static propTypes = {
				name:PropTypes.string.isRequired, //限制name必传且为字符串
				sex:PropTypes.string,//限制sex为字符串
				age:PropTypes.number,//限制age为数值
			}

			//指定默认标签属性值

static defaultProps = {
	sex:'男',//sex默认值为男
	age:18 //age默认值为18
}

函数组件使用props

三大属性中只有props可以用于函数组件因为函数可以接收参数state和refs都不能用于函数组件。

	<script type="text/babel">        
	//创建组件        
	function Person (props){            
	const {name,age,sex} = props            
	return (                    
	<ul>                        
	<li>姓名{name}</li>                        
	<li>性别{sex}</li>                        
	<li>年龄{age}</li>                    
	</ul>                )        }       
	 Person.propTypes = {           
	  name:PropTypes.string.isRequired, //限制name必传且为字符串            sex:PropTypes.string,//限制sex为字符串            age:PropTypes.number,//限制age为数值        }
	//指定默认标签属性值
	
	Person.defaultProps = {
		sex:'男',//sex默认值为男
		age:18 //age默认值为18
	}
	//渲染组件到页面
	ReactDOM.render(<Person name="jerry"/>,document.getElementById('test1'))
</script>

注意事项

限制props只能使用第一种方法

2.2.3 refs属性

组件内的标签可以定义ref属性来标识自己。this.refs拿到真实DOM

字符串形式的ref

class Demo extends React.Component{
			//展示左侧输入框的数据
			showData = ()=>{
				console.log(this);
				const {input1} = this.refs
				alert(input1.value)
			}
			//展示右侧输入框的数据
			showData2 = ()=>{
				console.log(this);
				const {input2} = this.refs
				alert(input2.value)
			}
			render(){
				return(
					<div>
						<input ref="input1" type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
					</div>
					
                    )
			}
		}
		//渲染组件到页面
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))

不被官方推荐因为效率不高

回调ref

  1. 内联函数推荐

注意

  1. 函数中的参数currentNode是ref所在的节点

  2. input1是类的属性即直接绑定到类里而不是像字符串ref一样添加到refs对象里
    回调函数有定义、没有执行函数名、最终执行别人调用

  1. 类绑定函数
saveInput = (c)=>{
				this.input1 = c;
				console.log('@',c);
			}
<input ref={this.saveInput} type="text"/>
  1. 回调ref中回调执行次数
    内联函数更新时会执行两次一次清空一次执行函数类绑定函数不会。

交互和更改状态的区别取决于是否修改render函数中节点的内容

<script type="text/babel">
		class Demo extends React.Component{
			myRef = React.createRef()
			myRef2 = React.createRef()
			showData = ()=>{
				alert(this.myRef.current.value);
			}
			showData2 = ()=>{
				alert(this.myRef2.current.value);
			}
			render(){
				return(
					<div>
						<input ref={this.myRef} type="text" placeholder="点击按钮提示数据"/>&nbsp;
						<button onClick={this.showData}>点我提示左侧的数据</button>&nbsp;
						<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>&nbsp;
					</div>
				)
			}
		}
		ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
	</script>
2.3 受控组件和非受控组件
2.3.1 非受控组件

用ref实现

页面中所有的输入类DOM现用现取即通过ref标识DOM进而获取数据

<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} type="text" name="username"/>
						密码<input ref={c => this.password = c} type="password" name="password"/>
						<button>登录</button>
					</form>
				)
			}
		}
		//渲染组件
		ReactDOM.render(<Login/>,document.getElementById('test'))
	</script>

✔️✔️✔️表单中都有onSubmit属性来控制提交之后的状态。输入DOM如得有name属性才能通过GET请求获取到query参数用携带。删掉action无法阻止表单页面刷新以及地址栏更新得要禁止默认事件event.preventDefault()。的默认type属性值就是submit

在这里插入图片描述

阿里云国内75折 回扣 微信号：monov8
阿里云国际，腾讯云国际，低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号：monov8 飞机：@monov6
返回列表

上一篇：TCP/IP IP地址概念与应用

下一篇：Spring Boot操作数据库学习之整合Druid

“【React全家桶】react简介（一）” 的相关文章

高频链表算法1年前 (2023-02-02)
【科普贴】LDO电源详解_ldo电源1年前 (2023-02-02)
Angularjs——初识AngularJS1年前 (2023-02-02)
AFNetworking整体框架简单整理1年前 (2023-02-02)
【计算几何】德劳内三角剖分算法 | 利用 scatter 绘制散点图 | 实现外接圆生成 | scipy库的 Dealunay 函数 | 实战: A-B间欧氏距离计算_python三维三角剖分1年前 (2023-02-02)
目标文件1年前 (2023-02-02)
【FPGA】基本实验步骤演示 | Verilog编码 | 运行合成 | 设备/引脚分配 | 综合/实施 | 设备配置 | 以最简单的逻辑非为例1年前 (2023-02-02)
将awk脚本写在文件里：一种高效的awk循环循环方式1年前 (2023-02-02)
2023 年云计算趋势1年前 (2023-02-02)
Flutter 3.7 正式发布1年前 (2023-02-02)

阿里云国际版