反单引号怎么打？将中文模式换成英文 在点击~键

设置属性接受强校验

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; }

1. querySelector只能选择第一个匹配的节点；

2. querySelectorAll可以选择多个节点,以","分隔开,返回的是个数组；

3. setstate是异步函数 不能立刻被执行

生命周期函数：某一时刻组件自动调用执行的函数
如render

1. initialization 初始化 更新props和state
2. mounting 挂载
   步骤是：
   componentWillMount 即将被挂载到页面时刻自动执行
   ->render->componentDidMount被挂载到页面之后执行
3. updation组件更新流程 关于props states的更新
4. Unmounting

用Charles进行数据接口模拟

获取接口数值函数

axios.get('/api/todolist')
.then((res)=>{
console.log(res.data);
this.setState(()=>{
return {
list: [...res.data]
}
})
.catch(()=>{alert('error')})
}

Redux工作流程