一、状态state
1.设置了state 的组件称之为有状态组件,没有设置state 的组件称之为无状态组件
2.组件中的数据
1)class A extends Componnent{
State ={key:value}
}
2)class A extends Componnent{
constructor( ){
Super( );
This.state={
Key.value
}
}
}
3.在类中 定义 state(只能写这个名字)对象
State={key.value}
4.不要直接修改 state:this.state.ok=’ok’
使用 setState{key:value}
5.setState 注意:
在同步逻辑中,异步更新状态与真实dom
在异步逻辑中,同步更新状态与真实dom
接受第二个参数,是个回调函数,在这里状态与dom更新完毕
二、属性props(只读)
1.state 是内部属性,props是为了更好的复用性,从外部接受数据
2.某组件
{属性}
<MyNav title={this.title} leftBtn={isShowLeft}/>
3.MyNav.js
1)
render(){
let{title,leftBtn}=this.props;
return(
<div>
{leftBtn&&<button>left</button>}
<p>{title}</p>
<button>right</button>
<img{...obj}/>
</div>
)
}
2)
import myprop from 'prop-types'
static propTypes={
title:myprop.string,
leftBtn:myprop.bool
}
// 默认属性
static defaultProps={
title:'首页'
}
4.函数式组件对于属性的应用会更简单一些,直接通过形参可以获得
三、属性及状态总结
1.属性是父组件对子组件的数据传输与操作
2.状态是组件自己的内部的数据
四、表单
1.受控组件:
由React控制
value绑定state中的值
实现表单元素的change事件
优化:可以使用name属性,统一完成change事件
注意:选择框与其他表单元素获取值的方式不一样
2.非受控组件:
由DOM操作
在constructor中React.createRef( )
五、通信
1.父传子:属性值
2.子传父:回调函数
3.在父组件中对子组件进行ref标记,可以获取到子组件的引用
4.中间人模式:由父组件充当中间人,利用子传父+父传子模式完成
5.发布订阅者模式
Let bus={
List=[ ],
Subscribe(cb){
This.list.push(cb);
},
//发布者
Pubish(text){
This.list.forEach(cb=>cb&&cb(text))
}
}
6.context 状态树传参(官方提供)
1)父组件:
<GlobalContext.provider value={{a:1,b:2}}>
<child1></child1>
<child2></child2>
</GlobalContext.provider>
2)子组件:
<GlobalContext.Consumer>
{
value=>{
return(
<div>子组件{value}</div>
)
}
}
</GlobalContext.Consumer>
注意:value是固定的关键词
7.Redux
六、插槽
1.默认形式
父组件:
<Child><p>插入任意内容</p></Child>
子组件:
return(
<div>
<p>子组件内部标签</p>
{以下内容是插槽内容,外部代码在此进行替代}
{this.props.childer}
{固定写法}
</div>
)
2.按顺序插入:
父组件:
<Child>
<p>西游记</p>
<p>红楼梦</p>
<p>水浒传</p>
</Child>
子组件Child:
return(
<div>
{this.props.children[0]}
{this.props.children[1]}
{this.props.children[2]}
</div>
)
3.作用:
1)提高代码的复用性
2)一定程度上减少父子通信
七、生命周期(钩子函数)
写在前边:只有类组件(函数组件需要hooks支持)
1.初始化阶段:
componentWillMount: 组件即将挂起,render之前最后一次修改state的机会
常用于:state的初始化
备注:如果有警告,可使用UNFAFE_componentWillMount
render: 只能访问props与state,不能修改state及进行dom输出
componentDidMount:
成功执行完毕render并完成dom节点的渲染,可以对dom修改
常用于:axios请求,订阅函数调用,计时器,dom操作
2.运行中阶段:
conponentWillReceiveProps(nextProps):
父组件修改属性触发
最先获取父组件传来的属性,可以在这里进行axios请求或者其它逻辑处理
备注:如果有警告,可使用UNSAFE_conponentWillReceiveProps
shouldComponentUpdata(nextProps,nextState):
返回false,会阻止render的调用
参数是 被修改之后新的属性及状态
componnentWillUpdata:
组件将要更新,不能修改属性及状态
备注:如果有警告,可使用UNSAFE_componnentWillUpdata
render: 只能访问props与state,不能修改state及进行dom输出
componentDidUpdata(preProps,preState):
可以修改dom
参数是 被修改之前的属性及状态
3.销毁阶段:
componentWillUnmount 在删除组件前进行清理工作
八、新生命周期(推荐)
1.老钩子问题:
componentWillUnmount 会重复触发多次,如果绑定事件无法绑定
2.static getDervicedStateFromProps(nextProps,nextState):
将属性转为状态
挂载之前与更新时会执行
返回一个状态对象