React组件
用来实现局部功能效果的代码和资源的集合(html/css/js/image等等) react有两种组件- 函数式组件
- class类名组件
组件各自的写法
函数式组件
let Com=()=>(
<div>
<span>aaaaaaaaa</span>
</div>
);
class类名组件
class Com extends React.Component{
render(){
return (
<div>
<span>aaaaaaaa</span>
</div>
)
}
}
使用方式
<Com></Com> 或者 <Com/>
组件的注意事项、区别
1、组件的首字母大写
2、组件使用的时候、如果没有内容可以使用单标签
生命周期 状态state this 属性
函数组件 基础的没有 基础的内有 注意可能会乱 有
class组件的区别 有的 有 实例 有
之前函数式组件一般用在做大的组件的结构,或者式用来布局的,写样子的。
之前基本上大部分用的是class组件
但是新版本hock给函数组件加了东西,现在用函数式组件的比较多
组件的属性
定义属性
<Com tit="我是函数式组件" name="组件1"/>
函数式
props props.xxxx
class类式
this.props.xxx
- 每个组件对象都会有props(properties的简写)属性
- 组件标签的所有属性都保存在props中
- 通过标签属性从组件外向组件内传递变化的数据
- 注意: 组件内部不要修改props数据
- 属性是只读的,不能修改
组件的状态state
-
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
-
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
-
状态数据,不能直接修改或更新
-
组件中render方法中的this为组件实例对象
calss Com extends React.Component{
constructor(){
super();
this.state={
n:1
}
}
}
组件中事件的使用
组件自定义的方法中this为undefined,如何解决?
a) 绑定this: 通过函数对象的bind()
b) 箭头函数
onClick={this.show}
this有问题
1、this.show.bind(this)
2、show=()=>{}
传参
this.show.bind(this,xxx,xxx)
事件对象
this.show.bind(this,xxx,ev)
组件的生命周期钩子函数
class名式
1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
1. constructor()
2. getDerivedStateFromProps
3. render()
4. componentDidMount()
2. 更新阶段: 由组件内部this.setSate()或父组件重新render触发
1. getDerivedStateFromProps
2. shouldComponentUpdate()
3. render()
4. getSnapshotBeforeUpdate
5. componentDidUpdate()
3. 销毁组件: 由ReactDOM.unmountComponentAtNode()触发
1. componentWillUnmount()
componentDidMount
:开启监听, 发送ajax请求componentWillUnmount
:例如: 清理定时器这样的收尾工作
即将废除的钩子componentWillMount
componentWillReceiveProps
componentWillUpdate
hook
useEffect
//相当于合并componentDidMount 组件挂载 和 componentDidUpdate 组件更新
return在组件销毁的时候也会更新
useEffect
钩子里面是异步的
每一次运行都是新的函数
useEffect(()=>{
console.log("effect")
}
return ()=>{
}
)
区别
真实DOM构建以后才会执行
而componentDidMount
和componentDidUpdate
在DOM构建之前的钩子
componentDidMount
或 componentDidUpdate
会阻塞浏览器更新屏幕 而useEffect
不会
DOM构建之前用useLayoutEffect