命名规则
组件名首字母必须大写
如果首字母小写的话,会被当成一个html标签其解析,而不是一个组件
function MyFuncComp1() {
return <h1>组件内容1</h1>
}
const comp = <MyFuncComp1 />;
console.log(comp)
function myFuncComp2() {
return <h1>组件内容2</h1>
}
const comp2 = <myFuncComp2 />;
console.log(comp2)
组件类型
函数组件
返回一个React元素
import React from 'react';
import ReactDOM from 'react-dom';
// 组件名首字母必须大写
// 函数组件要返回react元素
function MyFuncComp() {
// return React.createElement(...)
return <h1>组件内容</h1>
}
ReactDOM.render(
<div>
{/* {MyFuncComp()} */}//这种方式并没有体现出组件
<MyFuncComp/>
</div>,
document.getElementById("root")
);
类组件
必须继承React.Component
必须提供render函数,用于渲染组件
import React, { Component } from 'react'
// 导出一个类,这个类继承react的Component,且必须有render函数
export default class MyClassComp extends Component {
// 必须返回一个React元素
render() {
return <h1>组件内容</h1>
}
}
组件的属性
对于函数组件,属性会作为一个对象的属性,传递给函数的参数
对于类组件,属性会作为一个对象的属性,传递给构造函数的参数
注意:组件的属性,应该使用小驼峰命名法
import React, { Component } from 'react'
// 导出一个类,这个类继承react的Component,且必须有render函数
export default class MyClassComp extends Component {
constructor(props) {
super(props)
console.log(props)
}
// 必须返回一个React元素
render() {
if (this.props.obj) {
return (
<div style={{
width: '100%',
height: '100px',
background: 'rgb(224, 219, 219)'
}}>
<p>姓名:{this.props.name}</p>
<p>性别:{this.props.obj.sex}</p>
<p>年龄:{this.props.obj.age}</p>
</div>
)
} else if (this.props.em) {
return (
<div style={{
width: '100%',
height: '100px',
background: 'rgb(224, 229, 229)'
}}>
<h1>下面是传入的内容</h1>
{this.props.em}
</div>
);
}
return <h1>类组件内容,名字叫{this.props.name}</h1>
}
}
组件无法改变自身的属性。
之前学习的React元素,本质上,就是一个组件(内置组件)
React中的哲学:数据属于谁,谁才有权力改动
React中的数据,自顶而下流动,单向数据流
组件状态
组件状态:组件可以自行维护的数据;
状态(state):本质上是类组件的一个属性,是一个对象
组件状态仅在类组件中有效,函数组件通过hooks来使用组件状态
状态初始化
- 在构造函数中初始化
constructor(props) {
super(props)
// 状态初始化
this.state = {
initData: this.props.time
}
}
状态的变化
不能直接改变状态this.state.initData--;
:因为React无法监控到状态发生了变化;必须使用this.setState({})改变状态;this.setState()
来自父组件;一旦调用了this.setState
,会导致当前组件重新渲染
//这里会将之前的数据覆盖,其实就是Object.assign(this.state.initData,initData),
this.setState({
initData: this.state.initData - 1
});
组件中的数据
props:该数据是由组件的使用者传递的数据,所有权不属于组件自身,因此组件无法改变该数组
state:该数组是由组件自身创建的,所有权属于组件自身,因此组件有权改变该数据
组件事件
在React中,组件的事件,本质上就是一个属性;按照之前React对组件的约定,由于事件本质上是一个属性,因此也需要使用小驼峰命名法
常规使用
import React from 'react'
import ReactDOM from 'react-dom'
//function handleClick(e) {
//console.log("再点我我就生气了", e)
//}
// const btn = <button onClick={handleClick}>快点我!</button>
const btn = <button onClick={() => {
console.log("再点我我就生气了!")
}}>快点我!</button>
ReactDOM.render(btn, document.getElementById("root"));
注意
如果想要实现点击效果,应该在使用者的内置组件中调用
this指向
问题
如果没有特殊处理,在事件处理函数中,this指向undefined
<Tick onclick={this.handleOnClick} onOver={this.handleOnOver} time={10} />
handleOnOver() {
//这里的this就是undefined
this.setState({
isOver: true
})
}
处理方式
- 使用bind函数,绑定this
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
this.handleOver = this.handleOver.bind(this);
}
或者<Tick onClick={this.handleClick.bind(this)} onOver={this.handleClick.bind(this)} number={10} />
- 使用箭头函数
// 结果:handleClick不在原型上,而在对象上
handleClick = () => {
console.log(this)
console.log("点击了")
}
handleOver = () => {
this.setState({
isOver: true
})
}
setState,它对状态的改变,可能是异步的
如果改变状态的代码处于某个HTML元素的事件中,则其是异步的,否则是同步(定时器用的是setInterval,不是html元素事件)
如果遇到某个事件中,需要同步调用多次,需要使用函数的方式得到最新状态
最佳实践:
把所有的setState当作是异步的
永远不要信任setState调用之后的状态
如果要使用改变之后的状态,需要使用回调函数(setState的第二个参数)
如果新的状态要根据之前的状态进行运算,使用函数的方式改变状态(setState的第一个函数)
React会对异步的setState进行优化,将多次setState进行合并(将多次状态改变完成后,再统一对state进行改变,然后触发render)