泰德仁和科技-前端学习-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 name="child" obj={{a:1}}></App>
// 在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 <div>{this.props.title}<input type="text"/></div>

b. 用于控制组件状态

// 如: 控制标题是否显示
return <div>
          {this.props.showTitle?<Title/>:null}
</div>

c. 用于传入初始状态值

// 如：传入input的初始value
// 构造函数中
this.state = {
          value:this.props.value||""
}
// render函数中
return <div>
          <Title/>
          <input type="text" value={this.state.value} onChange={(e)=>this.setState({value:e.target.value})} />
</div>

注意：在react中input设置value后必需设置onChange事件来更新value，render渲染的时候value始终是同样的值
d. 用于定制处理事件

// 如: 当输入回车时，组件提供onSubmit接口，供父组件使用
// 子组件render函数中
return <div>
          <Title/>
          <input type="text" onKeyup={(e)=>{
              if(e.keyCode==13&&typeof this.props.onSubmit==="function"){
                  this.props.onSubmit(this.state.value)
              }
          }} />
</div>
// 父组件render函数中
return <Child onSubmit={(value)=>{
          console.log("提交的值是:"+value)
}}/>

4. 组件状态
   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

5. react注意事项

1. 组件名必须为大写字母开头,如： <app></app>不会被渲染
2. 由于class是javascript的关键词，所以class属性由className代替，如：<div className="list"></div>

掌握以上内容reactJS就算入门了，并可以进行开发了，官方已不推荐使用mixin

6. 关于组件生命周期的测试

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 <div className="inu-index">
            {this.state.name=="child"?null:<App name="child"></App>}
            <p onClick={()=>this.setState({})}>{this.state.name+"!!!"}</p>
        </div>
    }
}

export default App

组件开始渲染时 点击子组件重新渲染 点击父组件重新渲染