安装React官方浏览器调试工具,浏览器扩展搜索即可
比如红色的React就是本地开发模式
开启一个用React写的网站,比如美团
此时开发状态就变成了蓝色
组件也能解析出来
模块,简单来说就是JS代码分块了:
:
组件,简单来说就是把H5,CSS,JS,图像一些杂七杂八的整合到一个模块里:
模块化: 当应用的JS都以模块来编写,这个应用就是一个模块化的应用
组件化: 当应用是以多组件的方式实现,这个应用就是一个组件化的应用
函数式组件,那就先写一个函数放在script标签里备着
写完就需要渲染,光一个函数在那放着肯定不行,所以用ReactDOM.render渲染到真实DOM上
打开页面,很明显,不行,因为React不会直接认识函数
之前我们说过,React自定义的组件首字母一定大写
我们的函数式组件函数名就是组件的名字,所以组件名要大写,那么函数名也要大写!
如果小写了就会出现这种错误,因为小写的标签会先去h5原生的标签找,所以会找不到
1.React解析组件标签,然后找到了目标组件,比如上面的
组件
2.发现组件是使用函数定义的,随后调用该函数,将返回的虚拟DOM转为真实DOM,随后渲染到页面上
原型链:当在实例化的对象中访问一个属性时,首先会在该对象内部(自身属性)寻找,如找不到,则会向其__proto__指向的原型中寻找,如仍找不到,则继续向原型中__proto__指向的上级原型中寻找,直至找到或Object.prototype.__proto__为止(值为null),这种链状过程即为原型链。如下图所
原型链的作用:查找对象的属性(方法)
子类找不到就去父类去找
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello React!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<script type="text/javascript">
// 用class创建类,类中无需定义变量,构造器只有在需要赋值的时候才需要定义
class Person{
constructor(name,age){
//this指向当前实例对象
this.name=name;
this.age=age;
//当然可以在构造器里固定写值
this.school="尚硅谷"
}
// 类中定义方法不要用function,function就变成函数了
speak(){
console.log(`名字:${this.name},年龄:${this.age}`)
}
talk(){
console.log("people talk")
}
}
//继承
class Student extends Person{
constructor(name,age,grande){
// 继承用super关键字复用父类的构造
// surper(父类构造参数)
super(name,age);
// 子类独有的构造要单独写
this.grande=grande;
}
speak(){
//直接调用构造的值即可
console.log(`名字:${this.name},年龄:${this.age},年级:${this.grande}`)
}
study(){
console.log("努力学习")
}
}
const p=new Person("张三","23");
const student=new Student("李四","25","大三");
console.log(p);
p.speak();
student.speak();
student.study();
//调用父类方法,先去原型链找,找到了就调用,找不到继续往下面的原型链找
student.talk();
</script>
</body>
</html>
类组件,类名就是组件名
// 类组件必须继承于React的Component
// 创建类组件
class MyComponet extends React.Component{
// render是放在MyComponet的原型对象上面,供实例对象是用
// render中的this是谁?
// 实际上是指向MyComponet的实例对象,同时也是MyComponent组件实例对象
render(){
console.log("render中的this",this)
return <div>aaa</div>
}
}
// ReactDOM的render和类组件里的render没有关系,只是单纯的名字一样
ReactDOM.render(<MyComponet/>,document.getElementById("test"))
执行代码,成功渲染
ReactDOM.render(
执行时发生了什么
注意,我们这里说的是,类组件实例的核心属性
也就是说,只有实例对象才有属性
所以这里直接pass掉函数组件,函数组件的是无法创建对象的,只有类组件才能创建实例对象
给Java程序员一个类比
比如定义一个方法 public void test(){},方法是没办法创建对象的。(类比函数组件)
但是定义一个类,public class Test{},类是可以创建对象的。(类比类组件)
通过state对画面进行动态控制
<script type="text/babel">
// 借助构造器,对state设置值
class MyComponet extends React.Component{
constructor(props){
// 由于继承于React.Component
// 所以用构造器设置state值时,必须调用父类构造器(类组件语法,子类使用构造器时必须先用super调用父类构造器)
// 参数固定为属性props
super(props);
// 对当前对象state进行修改,注意是state,而不是states,这两个是不同的东西
// state在设置时需要用{key1:value1,key2:value2,...}这样来set
this.state={isHot:true}
}
render() {
console.log(this);
return (
<div>
今天天气{this.state.isHot?'炎热':'凉爽'}
</div>
);
}
}
// ReactDOM的render和类组件里的render没有关系,只是单纯的名字一样
ReactDOM.render(<MyComponet/>,document.getElementById("test"))
</script>
注意,H5中一些原生的属性在React中已经完成了重写
比如:
onclick在React中变成了onClick
onblur变成了onBlur
class变成了className
最后引入React的推荐写法
先分享一个错误写法
<script type="text/babel">
// 借助构造器,对state设置值
class MyComponet extends React.Component{
constructor(props){
super(props);
this.state={isHot:false}
}
render() {
return (
// 这种函数用字符串的形式肯定是不可以的
<div onClick={test()}> //换用表达式写法
今天天气{this.state.isHot?'炎热':'凉爽'}
</div>
);
}
}
// ReactDOM的render和类组件里的render没有关系,只是单纯的名字一样
ReactDOM.render(<MyComponet/>,document.getElementById("test"))
function test(){
console.log("OK")
}
这里会造成一个问题,就是把 表达式传给了onClick()事件
也就是onClick传了个函数表达式进去,而不是函数名
而这个函数表达式是个undefined的返回值,就会导致onClick事件触发函数后接收了undefined,如果是有小括号这样传值,会触发一次回调
,onClick在接收到undefined之后就会不动了,导致后续事件都失效
<div onClick={test()}></div> //表达式
<div onClick={test}></div> //函数名
function test(){
console.log("OK")
}
所以主要是记住,**如果要绑定事件,传一个函数名就行**
有的小伙伴可能会问,那这样怎么传参?
答案是箭头函数,用箭头函数传参
最后改成正确答案
<script type="text/babel">
// 借助构造器,对state设置值
class MyComponet extends React.Component{
constructor(props){
super(props);
this.state={isHot:false}
}
render() {
return (
<div onClick={test}>
今天天气{this.state.isHot?'炎热':'凉爽'}
</div>
);
}
}
// ReactDOM的render和类组件里的render没有关系,只是单纯的名字一样
ReactDOM.render(<MyComponet/>,document.getElementById("test"))
function test(){
console.log("OK")
}
</script>
将函数优化进组件里
理论上,函数和组件应该是融为一体的,不应该相互独立
所以将function函数放进类组件,只保留函数名+函数体即可
![02-React组件与模块_第22张图片](http://img.e-com-net.com/image/info8/4155ca7dd2b846b9a9ab5dc01d9cf53e.jpg)
如果放入类组件内部,则意味着属于这个类,所以onClick回调时需要用this指向,指向当前实例
解决类中的this指向问题
<script type="text/babel">
// 借助构造器,对state设置值
class MyComponet extends React.Component{
constructor(props){
// 由于继承于React.Component
// 所以用构造器设置state值时,必须调用父类构造器(类组件语法,子类使用构造器时必须先用super调用父类构造器)
// 参数固定为属性props
super(props);
// 对当前对象state进行修改,注意是state,而不是states,这两个是不同的东西
this.state={isHot:false}
// 解决test中的指向问题,这时如果再在test中输出,就不再是undefined
this.test=this.test.bind(this)
}
test(){
console.log("OK")
// test 函数放在哪? 放在MyComponet的原型对象上,供实例使用
// 由于test方法是onClick的回调,所以就不能用对象实例调用,直接调用即可
// 类方法中默认开启了局部的严格模式,所以此时如果输出this对象,即为undefined
console.log(this)
}
render() {
return (
<div onClick={this.test}>
今天天气{this.state.isHot?'炎热':'凉爽'}
</div>
);
}
}
// ReactDOM的render和类组件里的render没有关系,只是单纯的名字一样
ReactDOM.render(<MyComponet/>,document.getElementById("test"))
</script>
状态不可直接更改,要用setState
由此可见,state是不可以直接修改的!所以要借助对象内部的API来修改
打印一下对象,看看原型链,找到最顶层的ReactComponent的原型对象,类似于Object的性质
![02-React组件与模块_第27张图片](http://img.e-com-net.com/image/info8/6750f64a5c1743be97fe277c3087824e.jpg)
所以我们如果想修改,就只能用setState({key:value})
调用时:
this.setState({key:value})
setState是一个合并操作
比如我定义了一个state
this.state({"key1":value1},{"key2":value2})
如果此时,我对key1进行修改操作,此时仅仅只针对key1进行覆盖操作,不会影响key2以及key2的值。
this.setState({"key1":test})
那么此时的state就会变成
this.state({"key1":test},{"key2":value2})
如果再来一个key3,就再合并进去,这就是所谓的合并操作
组件各部分渲染次数
构造器 constructor => 有几个ReactDOM.render提及了这个组件,就构造几次,一般来说是一次
ReactDOM.render( ,document.getElementById("test"))
普通函数 test => 有几次事件触发,或者被调用,这个函数就调用几次
渲染 render => 1+n次,1是初始化时的渲染,n是state的修改次数
<script type="text/babel">
class MyComponet extends React.Component{
constructor(props){
// 构造器
}
test(){
// 普通函数
console.log(this)
this.setState({"key1":value1},{"key2":value2})
}
render() {
// render函数负责渲染
return (
<div onClick={this.test}>
今天天气{this.state.isHot?'炎热':'凉爽'}
</div>
);
}
}
ReactDOM.render(<MyComponet/>,document.getElementById("test"))
</script>
setState的简写方式
首先看看类中的一个知识,就是定义一个固定的值是不需要去像函数一样,定义变量类型变量名一连串操作… 直接赋值即可
构造器中定义固定值,和构造器外类内去定义效果一样
class MyComponet extends React.Component{
constructor(props){
this.name=name
this.state={isHot:false}
//构造器定义固定值
this.age=25
}
// 直接定义值是一样的,类中不需要定义变量,直接赋值即可
age=25
// 就连state也不用在构造器去写了,直接定义即可
state={isHot:false}
render() {
return (
<div onClick={this.test}>
今天天气{this.state.isHot?'炎热':'凉爽'}
</div>
);
}
}
自定义方法改写
为了解决类中方法的this指向问题,而采用了赋值语句接收箭头函数,如果是箭头函数,那么里面的this就会自动向外寻找,寻找其再外面一层的this,所以函数的再外一层的指向就是类,随即解决this指向问题。
test作为变量接收箭头函数的返回值
这样就相当于把箭头函数,赋值给了对象的属性上,
在属性调用的时候,相当于通过属性调用函数
属性一定有this,所以就解决了this的指向问题
实际开发过程中,自定义方法要用箭头函数,而不是这种写法
test(){
console.log(this)
this.state({"key1":value1},{"key2":value2})
}
箭头函数,test作为变量接收箭头函数的返回值,这样就相当于把箭头函数,赋值给了对象的属性上,这样在属性调用的时候,相当于通过属性调用函数,这样就解决了this指向问题
test = ()=>{
console.log(this)
this.state({"key1":value1},{"key2":value2})
}
注意:类里面不支持这种箭头函数写法,必须去用值接收
test ()=>{
console.log(this)
this.state({"key1":value1},{"key2":value2})
}
state总结
理解:
1.state是组件对象最重要的属性,值是对象({"key1":value1},{"key2":value2})
2.组件被称为状态机,通过更新组件的state来更新对应的页面显示(重新渲染组件)
强烈注意:
1.组件中render方法中的this为组件实例对象
2.组件自定义的方法中this为undefined,如何解决?
- a. 强制绑定this:通过函数对象的bind()方法来创建一个新函数
- b. 用属性接收一个箭头函数
3.状态数据,不能直接修改或更新,需要通过特定API来处理
核心属性2:props
前面看state只是类组件内部的东西,类组件内部可以提前准备一些数据用
回顾js展开运算符
首先回顾一下js的展开符号 ...
首先以打印一个数组为例:
<script type="text/javascript">
let a=[1,2,3]
console.log(a)
</script>
这种的输出就是结果就是这样,是叠在一起的
![,](http://img.e-com-net.com/image/info8/3ee0dec2a5c34427808b072280c4c703.jpg)
但如果是用了展开符号,再打印,数组内部结构就会被展开铺开
<script type="text/javascript">
let a=[1,2,3]
console.log(...a)
</script>
展开运算符的其他用法
可以用作两个数组连接
注意:展开符无法直接展开对象
比如,直接展开a对象会报错
![02-React组件与模块_第30张图片](http://img.e-com-net.com/image/info8/ba8b5d6aac1d40ca9f8b0a57289f84be.jpg)
但是利用展开符复制对象是可以的
![02-React组件与模块_第31张图片](http://img.e-com-net.com/image/info8/5736bba04a9e480da5fca729dd90edf0.jpg)
点击这里查看MDN官方文档对于展开符的解释
展开复制过程中直接修改某个属性
如果对于某个属性不满意,当然可以直接在复制过程中直接修改
let 新对象 = {...展开源对象,key:value,key2:value2......}
展开符就复习到这,开始进入React部分
React Props传参
如果总是用对象中的state,就好像只能内部操作属性,无法获取外部的值,此时就得用Props属性,来实现从外部对类标签进行传值的操作
直接在标签上,以key=value
的形式传值,注意,这里value先按照字符串来填写,写数字会报错,后面会解释为什么
![02-React组件与模块_第34张图片](http://img.e-com-net.com/image/info8/56b01c69fb7945b4a3999d46a91f24a4.jpg)
但是不难发现,如果写了n多个属性,就会很繁琐,所以引入展开符,效果一样,更加方便
注意,传入对象和被使用的对象key之间,key要匹配上,不然key都对不上了,肯定找不到value了
![02-React组件与模块_第35张图片](http://img.e-com-net.com/image/info8/921291edc75749548d182383b4fea465.jpg)
这里有一个非常有意思的点,之前上面刚刚才说过,对象不可以用展开符直接展开,这里就用到了展开符去传参。
因为这个是在React中的特殊语法,标签上可以这么去搞。有React依赖+babel就可以这么用
标签传值数字问题
直接传一个数字是不行的,因为React默认value是有数据类型的,双引号默认是String。
![在这里插入图片描述](http://img.e-com-net.com/image/info8/486c61f0e3a44e87bce552b08e2a7840.jpg)
所谓数据类型,只有在JS中才有,既然是这样,我们传一个JS代码就可以了,即传入参数用{}
包裹,这样数字就会被识别为Number类型,自然不会有问题
![在这里插入图片描述](http://img.e-com-net.com/image/info8/496b50c21412424895f2dbe1b32fd66b.jpg)
对象.propTypes和PropTypes的区别
就和Java一样,React传参编译没有明显提示
- 问题1:如果我希望传一个String,但是方法调用者传了一个Number就会有问题
- 问题2:某个属性没有值,那我希望给一个默认值,这个默认值该如何设置
可以看下面两个:
属性类型约束
React16以前的类型指定
对象.propTypes
来写规则代码
React.PropTypes.类型
来指定类型
![02-React组件与模块_第36张图片](http://img.e-com-net.com/image/info8/1b34a96287f34531ba458f3d3a0826d0.jpg)
React16及以后,因为React对象过于臃肿因此对象类型不再集成在React中,所以就引入了prop-types.js来做类型指定
![在这里插入图片描述](http://img.e-com-net.com/image/info8/fe547a385b3a4b81ab1771d31df05d21.png)
直接用PropTypes.类型
即可,测试可以正常渲染
![02-React组件与模块_第37张图片](http://img.e-com-net.com/image/info8/d9a4f49a12784adcac9af15fe3b93589.jpg)
甚至可以传函数进去,注意函数的关键字是func
而不是function
,这么写是避免重名
![02-React组件与模块_第38张图片](http://img.e-com-net.com/image/info8/04a2abb7742f49b4831f13088c199048.jpg)
属性默认值
简单指定一下即可,不是很难
MyComponet.defaultProps={
// 如果不传值,则默认张三
name:"张三",
// 如果不传值,则默认18
age:18,
}
将默认属性值和属性约束集成在类中
前面我们看到,默认属性值和属性约束都写在类的外面,这就违反了我们类组件的初衷,所以我们要把这个写在类内部
注意,是类的内部,render的外部
直接用static来修饰即可,同时去掉 类名称调用
props是只读的
函数式组件使用Props
首先,函数式组件,是没有实例对象的
所以,对象的三大属性,就有两个废掉了用不了,唯有props可以留下,因为比较特殊,在函数组件需要传参使用。
除此以外,像static这种类才会有的关键字就用不了了
以下是例子:
核心属性3:ref
可以理解为标签用来标识自己用的(类似于id)
组件内的标签可以定义ref属性来标识自己
每个标签上可以定义ref
,对象会将这些ref收集起来到对象身上,对象身上有refs
的属性,代表多个标签的ref被收集起来,我们可以通过这些ref来获取真实DOM
传统获取DOM的方式
class MyComponet extends React.Component{
showDate=()=>{
//这种传统形式获取太麻烦,因为React是操作DOM的,所以我们借助React的ref来获取真实DOM
const inputDiv=document.getElementById("input1")
console.log(inputDiv.value)
}
render(){
return (
<div>
<input id="input1" type="text"></input>
</div>
)
}
}
}
下面介绍React中的ref,ref有很多形式,具体可以看下面的介绍
字符串形式的ref(弃用)
字符串形式的ref指的是标签里的ref="字符串"
接受了一个字符串,所以是字符串形式的ref
注意,写在标签里的是ref,在标签外收集的时候是用this.refs来进行收集,最后通过解构的方式拿到key
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello React!</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="test"></div>
</body>
<script type="text/javascript" src="../js/react.development.js"></script> <!--React核心的库-->
<script type="text/javascript" src="../js/react-dom.development.js"></script><!--React操作Dom相关库-->
<script type="text/javascript" src="../js/babel.min.js"></script><!--将JSX转换成JS用的依赖,因为浏览器不认识JSX,只认识JS-->
<script type="text/babel">
class MyComponet extends React.Component{
showData=()=>{
//这种传统形式获取太麻烦,因为React是操作DOM的,所以我们借助React的ref来获取真实DOM
const inputDiv=document.getElementById("input1")
alert(inputDiv.value)
}
showData2=()=>{
// 通过React对象来操作,通过refs属性获取完之后解构
// 这里解构是依靠input2的ref名字来进行解构的
const {input2}=this.refs;
alert(input2.value)
}
render(){
return (
<div>
<input id="input1" type="text" placeholder="点击按钮弹出左侧数据"></input>
<button onClick={this.showData2}></button>
<input ref="input2" onBlur={this.showData2} type="text" placeholder="获得焦点提示数据"></input>
</div>
)
}
}
ReactDOM.render(<MyComponet/>,document.getElementById("test"))
</script>
</html>
回调函数形式的ref
主要是标签上的ref参数,通过回调函数的形式,将当前节点通过箭头函数传传递到当前对象上
其中,current代表传入的DOM,即当前组件,this.test=current代表了在对象上创建一个test属性,并且将当前传入的current DOM给挂载到对象上
这里的this指向是谁? 因为这个标签是在render里面的,所以ref里的回调函数,会向外扩散寻找对象,即找到类组件的对象
<input ref={(current)=>{this.test=current}}><input/>
提示,ES6语法:
const {test}=this
这两个写法并不等价
const {test}=this.test
在JavaScript ES6中,你可以使用解构赋值(destructuring assignment)来从对象中提取属性。
当你写 const {test}=this 时,你是在从 this 对象中提取 test 属性,并将其赋值给 test 变量。
然而,当你尝试 const {test}=this.test 时,你实际上是在尝试从 this.test 这个值(而不是对象)中提取属性。
如果 this.test 是一个对象,那么这个表达式就会尝试从该对象中提取 test 属性。
如果 this.test 不是一个对象,那么这个表达式就会失败,因为它无法从非对象值中提取属性。(属性自己是不能再拿出一个属性的,只有对象才能拿出属性)
代码示例:
<script type="text/babel">
class MyComponet extends React.Component{
showData=()=>{
// 直接解构对象属性,获取DOM
const {test}=this
// 获取属性
alert(test.value)
}
render(){
return (
<div>
<input ref={(current)=>this.test=current} type="text" placeholder="点击按钮弹出左侧数据"></input>
<button onClick={this.showData}>点击触发</button>
</div>
)
}
}
ReactDOM.render(<MyComponet/>,document.getElementById("test"))
</script>
回调ref的执行次数问题
回调ref的次数在组件被更新的时候会触发两次,在组件第一次创建的时候只触发一次
为什么更新的时候是触发两次
- 第一次是为了在更新之前,把上一次的处理后的属性内容都清空掉,传一个null进去。(清空的动作)
- 第二次就是正常的触发,该正常传DOM就传DOM。(更新的动作)
多的代码就不放了,这个不必纠结,直接正常用回调函数即可,不必纠结两次回调
![02-React组件与模块_第44张图片](http://img.e-com-net.com/image/info8/ec71c8bef8744bd1844c9781eea756db.jpg)
createRef 官方推荐
这个是React官方大力推荐的ref的创建方式,主要指的是React.createRef()函数
React.createRef(),调用后可以返回一个容器,该容器可以存储被ref标识的节点,该容器是“调用ref的标签专属的”,如果后续还有组件用了同名的ref属性,就会覆盖之前的ref
// 直接就可以挂载到对象属性上
对象属性=React.createRef()
调查一下为啥输出value
JSX的注释问题
JSX的注释需要用花括号括起来
括起来之后,就可以在内部写JS的注释了,因为被识别为JS语句了