版权声明:版权所有!转载通知我! https://blog.csdn.net/qq_41775119/article/details/83547911
反单引号怎么打?将中文模式换成英文 在点击~键
设置属性接受强校验
import PropTypes from 'prop-types';
//在export default之前加入如下
ZuJian.propTypes ={//这行propTypes要小写
content:PropTypes.oneOfType([PropTypes.number,PropTypes.string]),
//必须是string/num类型之一 这行P要大写
function1:PropTypes.func,//必须是func类型
index:PropTypes.number,
test:PropTypes.string.isRequired,
//isRequired表示父组件一定要传递这个值给子组件 不然报警告
}
还有很多类型如array数组 详情进react官网查看
定义默认值所以即使没传值也不会警告
ZuJian.defaultProps = {
test:'hello world'
}
1、数据 :state
2、模板:render里的JSX
3、数据加模板结合生成真实的DOM来显示
4、state改变
5、数据模板结合生成真实DOM替换原始DOM
缺陷:
第一次第二次都生成的完整的DOM片段 消耗性能
升级版1.0 性能提升不明显
升级版2.0 虚拟DOM
也就是JSX -> JS对象 -> 真实DOM
return <div>item</div>
return React.createElement('div',{},'item');
//这俩是效果一样的
所以是JSX -> createElement ->虚拟DOM(JS对象) ->真实的DOM
ref
不再需要e.target获取元素
<input ref={(input) = > {this.input=input}} />
指向input这个DOM节点
所以函数中
旧版:
扫描二维码关注公众号,回复:
3845989 查看本文章
handle(e){
const value = e.target.value;}
新版
handle(){
const value = this. input.value; }
-
querySelector只能选择第一个匹配的节点;
-
querySelectorAll可以选择多个节点,以","分隔开,返回的是个数组;
-
setstate是异步函数 不能立刻被执行
生命周期函数:某一时刻组件自动调用执行的函数
如render
- initialization 初始化 更新props和state
- mounting 挂载
步骤是:
componentWillMount 即将被挂载到页面时刻自动执行
->render->componentDidMount被挂载到页面之后执行 - updation组件更新流程 关于props states的更新
- Unmounting
用Charles进行数据接口模拟
获取接口数值函数
axios.get('/api/todolist')
.then((res)=>{
console.log(res.data);
this.setState(()=>{
return {
list: [...res.data]
}
})
.catch(()=>{alert('error')})
}
Redux工作流程