前提知识
(v)=>{} 语法
作用：类似于function(v){}
区别：
function test(){
this.name = "parent"
(function(){
// 这里的this是本函数的 this
console.log(this.name) // undefined
})()
(()=>{
// 这时的this同函数外的this
console.log(this.name) // "parent"
})()
}
react组件
react自己维护了一个DOM树，当组件变化时才更新浏览器dom树
- react组件通过render函数渲染，通常有三种情况会触发render函数
a. 组件加入react DOM树时
b. 调用组件的setState函数后
c. 父组件调用render后 - 组件生命周期(分别对应上述三种情况)
a. componentWillMount->componentDidMount
b. componentWillUpdate->componentDidUpdate
c. componentWillReceiveProps->componentWillUpdate
->componentDidUpdate - 组件属性
Tips:
- 组件的属性为只读类型，不能赋值
- 通常组件中需要修改的值放在this.state中，常见代码
this.state = {
value:this.props.value
}
这时，当传入的属性变化时不会自动更新this.state.value，需要在componentWillReceiveProps中手动更新
- 什么值该作为组件属性？（组件属性常见的4种作用）
a. 用于传入组件可定制的属性
// 如：输入框组的标题需要可定制时
return {this.props.title}
b. 用于控制组件状态
// 如: 控制标题是否显示
return
{this.props.showTitle?c. 用于传入初始状态值
// 如：传入input的初始value
// 构造函数中
this.state = {
value:this.props.value||""
}
// render函数中
return
注意：在react中input设置value后必需设置onChange事件来更新value，render渲染的时候value始终是同样的值
d. 用于定制处理事件
// 如: 当输入回车时，组件提供onSubmit接口，供父组件使用
// 子组件render函数中
return
{
console.log("提交的值是:"+value)
}}/>
- 组件状态
this.state属于组件自身的，需要变化的数据或状态
使用方式比较灵活，这里着重提一下this.setState函数
this.state = {
a:1,
b:2,
}
// 方法1
this.setState({a:2})
// 方法2
this.state = {a:2}
// 方法3
this.state.a = 2
// 方法4
this.state.a = 2
this.setState({})
方法1：a的值为2，b的值不变，并触发render重新渲染
方法2：a的值为2，b的值为undefined，不触发render
方法3：a的值为2，b的值不变，不触发render
方法4：同方法1
- react注意事项
- 组件名必须为大写字母开头,如：
不会被渲染 - 由于class是javascript的关键词，所以class属性由className代替，如：
掌握以上内容reactJS就算入门了，并可以进行开发了，官方已不推荐使用mixin
- 关于组件生命周期的测试
import React from 'react';
import './index.less';
class App extends React.Component {
constructor(props) {
super(props);
this.displayName = 'App';
this.state = {
name:this.props.name||"parent"
}
}
componentDidMount(){
console.log(this.state.name+":componentDidMount")
}
componentWillReceiveProps(props,prevProps){
console.log(this.state.name+":componentWillReceiveProps")
}
componentWillMount(){
console.log(this.state.name+":componentWillMount")
}
componentWillUpdate(){
console.log(this.state.name+":componentWillUpdate")
}
componentDidUpdate(){
console.log(this.state.name+":componentDidUpdate")
}
componentWillUnmount(){
console.log(this.state.name+":componentWillUnmount")
}
render() {
console.log(this.state.name+":render")
return
{this.state.name=="child"?null:this.setState({})}>{this.state.name+"!!!"}
}
}
export default App
组件开始渲染时
点击子组件重新渲染
点击父组件重新渲染