泰德仁和科技-前端学习-reactJS(一)

前提知识

(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树

1. react组件通过render函数渲染，通常有三种情况会触发render函数
   a. 组件加入react DOM树时
   b. 调用组件的setState函数后
   c. 父组件调用render后
2. 组件生命周期(分别对应上述三种情况)
   a. componentWillMount->componentDidMount
   b. componentWillUpdate->componentDidUpdate
   c. componentWillReceiveProps->componentWillUpdate
   ->componentDidUpdate
3. 组件属性

// 在App组件中
this.props.name // 值为 "child"
this.props.obj // 值为 {a:1}

Tips:

1. 组件的属性为只读类型，不能赋值
2. 通常组件中需要修改的值放在this.state中，常见代码

this.state = {
          value:this.props.value
}

这时，当传入的属性变化时不会自动更新this.state.value，需要在componentWillReceiveProps中手动更新

3. 什么值该作为组件属性？（组件属性常见的4种作用）
   a. 用于传入组件可定制的属性

// 如：输入框组的标题需要可定制时
return 
{this.props.title}

b. 用于控制组件状态

// 如: 控制标题是否显示
return 

          {this.props.showTitle?