文章目录
2.1. 基本理解和使用
2.1.1. 使用React开发者工具调试
2.1.2. 效果
-
1.函数式组件
<!-- 准备好一个“容器” --> <div id="test"></div> <script type="text/babel"> //1.创建函数式组件 function MyComponent(){ console.log(this); //此处的this是undefined，因为babel编译后开启了严格模式 return <h2>我是用函数定义的组件(适用于【简单组件】的定义)</h2> } //2.渲染组件到页面 ReactDOM.render(<MyComponent/>,document.getElementById('test')) /* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。 */ </script>2.类式组件
<!-- 准备好一个“容器” --> <div id="test"></div> <script type="text/babel"> //1.创建类式组件 class MyComponent extends React.Component { render(){ //render是放在哪里的？—— MyComponent的原型对象上，供实例使用。 //render中的this是谁？—— MyComponent的实例对象 <=> MyComponent组件实例对象。 console.log('render中的this:',this); return <h2>我是用类定义的组件(适用于【复杂组件】的定义)</h2> } } //2.渲染组件到页面 ReactDOM.render(<MyComponent/>,document.getElementById('test')) /* 执行了ReactDOM.render(<MyComponent/>.......之后，发生了什么？ 1.React解析组件标签，找到了MyComponent组件。 2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。 3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。 */ </script>
复习1.类基本知识
1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1_类的基本知识</title>
</head>
<body>
<script type="text/javascript" >
/*
总结：
1.类中的构造器不是必须要写的，要对实例进行一些初始化的操作，如添加指定属性时才写。
2.如果A类继承了B类，且A类中写了构造器，那么A类构造器中的super是必须要调用的。
3.类中所定义的方法，都放在了类的原型对象上，供实例去使用。
*/
//创建一个Person类
class Person {
//构造器方法
constructor(name,age){
//构造器中的this是谁？—— 类的实例对象
this.name = name
this.age = age
}
//一般方法
speak(){
//speak方法放在了哪里？——类的原型对象上，供实例使用
//通过Person实例调用speak时，speak中的this就是Person实例
console.log(`我叫${this.name}，我年龄是${this.age}`);
}
}
//创建一个Student类，继承于Person类
class Student extends Person {
constructor(name,age,grade){
super(name,age)
this.grade = grade
this.school = '尚硅谷'
}
//重写从父类继承过来的方法
speak(){
console.log(`我叫${this.name}，我年龄是${this.age},我读的是${this.grade}年级`);
this.study()
}
study(){
//study方法放在了哪里？——类的原型对象上，供实例使用
//通过Student实例调用study时，study中的this就是Student实例
console.log('我很努力的学习');
}
}
class Car {
constructor(name,price){
this.name = name
this.price = price
// this.wheel = 4
}
//类中可以直接写赋值语句,如下代码的含义是：给Car的实例对象添加一个属性，名为a，值为1
a = 1
wheel = 4
static demo = 100
}
const c1 = new Car('奔驰c63',199)
console.log(c1);
console.log(Car.demo);
</script>
</body>
</html>
2.1.3. 注意
- 组件名必须首字母大写
- 虚拟DOM元素只能有一个根元素
- 虚拟DOM元素必须有结束标签
2.1.4. 渲染类组件标签的基本流程
- React内部会创建组件实例对象
- 调用render()得到虚拟DOM, 并解析为真实DOM
- 插入到指定的页面元素内部
2.2. 组件三大核心属性1: state
2.2.1. 效果
需求: 定义一个展示天气信息的组件
1.默认展示天气炎热 或 凉爽
2.点击文字切换天气
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入三个js -->
<script type="text/babel">
//1.创建组件
class Weather extends React.Component(){
//state可以简写成
//state= {isHot:false,wind:"微风"}
// 构造器调用几次？--- 1次
constructor(props){
console.log('constructor');
super(props);
this.state = {isHot:false;wind:'微风'}
//解决changeWeather的this指向问题
this.changeWeather = this.changeWeather.bind(this);
}
//render调用了几次---点几次调用几次
changeWeather(){
//changeWeather放在哪里？ ———— Weather的原型对象上，供实例使用
//由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
//类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefined
console.log('changeWeather');
//获取原来的isHot值
const isHot = this.state.isHot
//严重注意：状态必须通过setState进行更新,且更新是一种合并，不是替换。
this.setState({isHot:!isHot})
console.log(this);
//严重注意：状态(state)不可直接更改，下面这行就是直接更改！！！
//this.state.isHot = !isHot //这是错误的写法
}
}
//2.渲染组件到页面
ReactDOM.render(<Weather/>,document.getElementById('test'))
</script>
2.2.2. 理解
- state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
- 组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
2.2.3. 强烈注意
- 组件中render方法中的this为组件实例对象
- 组件自定义的方法中this为undefined，如何解决？
a)强制绑定this: 通过函数对象的bind()
b)箭头函数 - 状态数据，不能直接修改或更新
2.3. 组件三大核心属性2: props
2.3.1. 效果
需求: 自定义用来显示一个人员信息的组件
1.姓名必须指定，且为字符串类型；
2.性别为字符串类型，如果性别没有指定，默认为男
3.年龄为字符串类型，且为数字类型，默认值为18
<!-- 准备好一个“容器” -->
<div id="test1"></div>
<div id="test2"></div>
<div id="test3"></div>
<script type="text/babel">
//创建组件
class Person extends React.Component{
constructor(props){
// 构造器是否接收props，是否传递给super，取决于：是否希望在构造器中通过this访问
super(props);
console.log("constructor",this.props);
}
// 对标签属性进行必要性限制
static propTypes = {
name:PropTypes.string.isRequired,
sex:PropTypes.string,
age:PropTypes.number,
}
// 指定默认标签属性值
static defaultProp = {
sex:'男',
age:18
}
render(){
// console.log(this);
const {name,age,sex} = this.props
//props是只读的
//this.props.name = 'jack' //此行代码会报错，因为props是只读的
return (
<ul>
<li>姓名：{name}</li>
<li>性别：{sex}</li>
<li>年龄：{age+1}</li>
</ul>
)
}
}
//对标签属性进行类型、必要性的限制
//完整写法
//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
//}
//渲染组件到页面
ReactDOM.render(<Person name={100} speak={speak}/>, document.getElementById('test1'))
ReactDOM.render(<Person name="tom" age={18} sex="女"/> document.getElementById('test2'))
const p = {name:'老刘',age:18,sex:'女'}
// console.log('@',...p);
// ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
ReactDOM.render(<Person {...p}/>,document.getElementById('test3'))
function speak(){
console.log('我说话了');
}
</script>
2.3.2. 理解
1.每个组件对象都会有props(properties的简写)属性
2.组件标签的所有属性都保存在props中
2.3.3. 作用
1.通过标签属性从组件外向组件内传递变化的数据
2.注意: 组件内部不要修改prop数据
2.3.4. 编码操作
1.内部读取某个属性值
2.对props中的属性值进行类型限制和必要性限制
第一种方式（React v15.5 开始已弃用）：
第二种方式（新）：使用prop-types库进限制（需要引入prop-types库）
3.扩展属性: 将对象的所有属性通过props传递
4.默认属性值：
5.组件类的构造函数
2.4. 组件三大核心属性3: refs与事件处理
2.4.1. 效果
需求: 自定义组件, 功能说明如下:
1.点击按钮, 提示第一个输入框中的值
2.当第2个输入框失去焦点时, 提示这个输入框中的值
效果如下：
2.4.1.1字符串形式的ref
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入三个库 -->
<script type="text/babel">
//创建组件
class Demo extends React.Component{
//展示左侧输入框数据
showData = ()=>{
const {input} = this.refs;
alert(input.value);
}
//展示右侧输入框数据
showData2 = () =>{
const {input} = this.refs;
alert(input2.value)
}
render(){
return(
<div>
<input ref="input1" type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
2.4.1.2回调函数形式的ref
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入三个库 -->
<script type="text/babel">
//创建组件
class Demo extends React.Component{
//展示左侧输入框数据
showData = ()=>{
const {input} = this;
alert(input.value);
}
//展示右侧输入框数据
showData2 = () =>{
const {input} = this;
alert(input2.value)
}
render(){
return(
<div>
<input ref={c=>this.input1 = c} type="text" placeholder="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input ref={c=>this.input2=c} onBlur={this.showData2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
2.4.1.3回调ref中回调执行次数的问题
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入三个库 -->
<script type="text/babel">
//创建组件
class Demo extends React.Component{
state = {isHot:false}
showInfo = ()=>{
const {input1} = this;
alert(input.value)
}
changeWeather = ()=>{
//获取原来的状态
const {isHot} = this.state;
//更新状态
this.setState({isHot:!isHot})
}
saveInput = (c)=>{
this.input1 = c;
console.log('@',c)
}
render(){
const {isHot} = this.state
return(
<div>
<h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
{/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>*/}
<input ref={this.saveInput} type="text"/><br/><br/>
<button onClick={this.showInfo}>点我提示输入的数据</button>
<button onClick={this.changeWeather}>点我切换天气</button>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
2.4.1.4 createRef的使用
<!-- 准备好一个“容器” -->
<div id="test"></div>
<!-- 引入三个库 -->
<script type="text/babel">
//创建组件
class Demo extends React.Component{
/*
React.createRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是“专人专用”的
*/
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="点击按钮提示数据"/>
<button onClick={this.showData}>点我提示左侧的数据</button>
<input onBlur={this.showData2} ref={this.myRef2} type="text" placeholder="失去焦点提示数据"/>
</div>
)
}
}
//渲染组件到页面
ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test'))
</script>
2.4.2. 理解
组件内的标签可以定义ref属性来标识自己
2.4.3. 编码
1.字符串形式的ref
2.回调形式的ref
3.createRef创建ref容器·
2.4.4. 事件处理
- 通过onXxx属性指定事件处理函数(注意大小写)
1)React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
2)React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)- 通过event.target得到发生事件的DOM元素对象
2.5. 收集表单数据
2.5.1. 效果
需求: 定义一个包含表单的组件
输入用户名密码后, 点击登录提示输入信息
2.5.2. 理解
包含表单的组件分类
-
受控组件
<!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入三个库 --> <script type="text/babel"> //创建组件 class Demo 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(<Demo a="1" b="2"/>,document.getElementById('test')) </script> -
非受控组件
<!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入三个库 --> <script type="text/babel"> //创建组件 class Demo extends React.Component{ //初始化状态 state = { username:'', //用户名 password:'' //密码 } //保存用户名到状态中 saveUsername = (event)=>{ this.setState({username:event.target.value}) } //保存密码到状态中 savePassword = (event)=>{ this.setState({password:event.target.value}) } //表单提交的回调 handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this.state alert(`你输入的用户名是：${username},你输入的密码是：${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名：<input onChange={this.saveUsername} type="text" name="username"/> 密码：<input onChange={this.savePassword} type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件到页面 ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test')) </script>2.5.3 高阶函数柯里化
<!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入三个库 --> <script type="text/babel"> /* 高阶函数：如果一个函数符合下面2个规范中的任何一个，那该函数就是高阶函数。 1.若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。 2.若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。 常见的高阶函数有：Promise、setTimeout、arr.map()等等 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。 function sum(a){ return(b)=>{ return (c)=>{ return a+b+c } } } */ //创建组件 class Demo extends React.Component{ //初始化状态 state = { username:'', //用户名 password:'' //密码 } //保存用户名到状态中 saveUsername = (dataType)=>{ return (event)=>{ this.setState({[dataType]:event.target.value}) } } //表单提交的回调 handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this.state alert(`你输入的用户名是：${username},你输入的密码是：${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> //传入一个参数，返回一个函数 用户名：<input onChange={this.saveUsername('username')} type="text" name="username"/> 密码：<input onChange={this.savePassword('password')} type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件到页面 ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test')) </script>不使用柯里化实现
<!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入三个库 --> <script type="text/babel"> class Demo extends React.Component{ //初始化状态 state = { username:'', //用户名 password:'' //密码 } //保存表单数据到状态中 saveFormData = (dataType,event)=>{ this.setState({[dataType]:event.target.value}) } //表单提交的回调 handleSubmit = (event)=>{ event.preventDefault() //阻止表单提交 const {username,password} = this.state alert(`你输入的用户名是：${username},你输入的密码是：${password}`) } render(){ return( <form onSubmit={this.handleSubmit}> 用户名：<input onChange={event => this.saveFormData('username',event) } type="text" name="username"/> 密码：<input onChange={event => this.saveFormData('password',event) } type="password" name="password"/> <button>登录</button> </form> ) } } //渲染组件到页面 ReactDOM.render(<Demo a="1" b="2"/>,document.getElementById('test')) </script>
259
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
