react-day1
1.react特点
1.声明式
2.组件化
3.一次编写，跨平台
4.单向数据流
5.虚拟DOM
6.Diff算法
2.脚手架搭建项目
npx create-react-app my-app
cd my-app
npm start
3.语法规则
1.根元素只能有一个
2.jsx中使用使用js表达式，表达式写在{}中
3.属性值指定为字符串字面量，或者属性值中插入一个js表达式
4.style对应的必须是样式对象，class要写作className
5.注释要写在花括号
6.jsx允许在模板中插入数组，数组会自动展开所有成员
4.creatElement方法
1.React.creatElement(type,[props],[...children])
2.type 创建的React元素类型，可选的值有：标签字符串、React组件
.props(可选) React的元素属性
4.children(可选) React元素的子元素
5.jsx的本质是React.creatElement方法的语法糖
6.React中的组件
1. class 类名 extendsReact.Component{
render(){
return (
// 一段 jsx
)
}
}
2.function 组件名(){
return (
// 一段jsx
)
}
7.事件处理
1.阻止 e.preventDefault()
2.原生事件对象 e.nativeEvent
8.this的修正
1.只针对类组件
2.改用箭头函数/构造函数中用bind改变this的指向
9.组件的状态和数据的传递(无hooks,只有类组件有状态)
this.setState({
name:newValue
})
或者
this.setState(()=>{
name:newValue
})
this.setState(()=>{
name:newValue
})
修改组件状态，setState对状态的改变可能是异步。处于事件处理函数时是异步
最佳实践：1.所有setState统一当做异步
2.永远不要相信setState调用之后的状态
3.如果要使用改变之后的状态，需要使用回调函数(setState的第二个参数是函数)
4.如果新状态要根据之前的状态进行计算，将多次setState进行合并(将多次状态改变完成后，再统一对state进行改变，然后出发render)
10.props验证
prop-types
安装 npm install --save prop-types
引入 import PropTypes from 'prop-types
使用 MyComponent.propTypes = {
name:PropTypes.string
}
11.状态提升，自组建传递数据给父组件
12.受控组件和非受控组件
1.受控组件 受state控制的组件
2.非受控组件 // 表单一旦用了value，默认为受控组件，设置默认值使用defaultValue
// 使用非受控组件的情况：用户文件上传
类组件中：
constructor(props){
super(props);
this.handleSubmit = this.handleSubmit(this)
this.inputRef = React.creatrRef();
}
13.生命周期（类组件独有）
- construct
- constructor() 初始化操作
- 同一个组件对象只会创建一次
- 不能在第一次挂载到页面之前调用setState()，为了避免问题，构造函数中严禁适应setSate
- render
- 是整个类组件中必须书写的生命周期方法
- 返回一个虚拟DOM，会被挂载到虚拟DOM中，最终渲染到页面的真是DOM中
- render可能不止运行一次，只要需要重新渲染就会重新运行、
- 严禁使用setState,因为可能会导致无限递归渲染
- com ponentDidMount
- 类似于vue中mounted
- 只执行一次
- 可以使用setState
- 通常情况下，会将网络请求，启动计时器等一开始需要的操作，书写到该函数中
- componentWillUnmout
- 通常在该函数中销毁组件依赖的一些资源，比如计时器
- componentDIdUpdate 更新后调用
