React实战入门指南

基础入门文档建议直接查看React中文文档，这样能少走很多弯路,基于版本V16.6.0
React中文文档

重点：推荐在 React 中使用 JSX 来描述用户界面。[JSX 简介]

生命周期

1.组件初始化阶段

constructor(props) {
    super(props);
    this.state = {date: new Date()};
}

super(props)用来调用基类的构造方法( constructor() ), 也将父组件的props注入给子组件，供子组件读取(组件中props只读不可变，state可变)。而constructor()用来做一些组件的初始化工作，如定义this.state的初始内容。
2.组件的挂载阶段
componentWillMount
1、组件刚经历constructor,初始完数据
2、组件还未进入render，组件还未渲染完成，dom还未渲染
componentDidMount
组件第一次渲染完成，此时dom节点已经生成，可以在这里调用ajax请求，返回数据setState后组件会重新渲染
render
render函数会插入jsx生成的dom结构，react会生成一份虚拟dom树，在每一次组件更新时，在此react会通过其diff算法比较更新前后的新旧DOM树，比较以后，找到最小的有差异的DOM节点，并重新渲染
3.更新阶段
shouldComponentUpdate
此方法通过比较nextProps，nextState及当前组件的this.props，this.state，返回true时当前组件将继续执行更新过程，返回false则当前组件更新停止，以此可用来减少组件的不必要渲染，优化组件性能。
优化：利用shouldComponentUpdate钩子函数优化react性能

shouldComponentUpdate(nextProps,nextState){
    if(nextState.msg == this.state.msg){
      console.log(132312);
      return false;
    }else{
      return true;
    }
}

componentWillReceiveProps
此方法只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的新props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在此方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render
componentWillUpdate
此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。
componentDidUpdate
此方法在组件更新后被调用，可以操作组件更新的DOM，prevProps和prevState这两个参数指的是组件更新前的props和state

4.卸载阶段
componentWillUnmount
此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚componentDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

父子之间的传递属性

1.不使用redux
父传子
子组件显示父组件传过来的props有两种方式：
1、直接使用
这种方式，父组件改变props后，子组件重新渲染，由于直接使用的props，所以我们不需要做什么就可以正常显示最新的props

class Child extends Component {
    render() {
        return <div>{this.props.someThings}</div>
    }
}

2、转换成自己的state
这种方式，由于我们使用的是state，所以每当父组件每次重新传递props时，我们需要重新处理下，将props转换成自己的state，这里就用到了 componentWillReceiveProps。

class Child extends Component {
    constructor(props) {
        super(props);
        this.state = {
            someThings: props.someThings
        };
    }
    componentWillReceiveProps(nextProps) {  //只有添加此方法才会更新父页面传过来的参数
        this.setState({someThings: nextProps.someThings});
    }
    render() {
        return <div>{this.state.someThings}</div>
    }
}

子传父

import React, { Component } from 'react';
import Children from './Children';
class Father extends Component {
  childs = (txt) => {
    console.log(txt)
  }
  render() {
    return (
      <div className="box">
        <Children name="我是父级传递过来的" childs={this.childs} fun={this.fun}></Children>
      </div>
        );
  }
}
export default Father;

import React, { Component } from 'react';
class Children extends Component{
    giveFather=()=>{
        const value='你想要传的值'
        this.props.childs(value)
    }
    render(){
        let str = "我是子组件内的内容";
        return (
            <div className="child">
               {this.props.name}
               <button onClick={this.giveFather}>button</button>
            </div>
        )
    }
}
export default Children;

2.使用redux（状态管理）: redux中文官网

事件处理

绑定this:

class LoggingButton extends React.Component {
  handleClick = () => {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.handleClick}>
        Click me
      </button>
    );
  }
}

或者

class LoggingButton extends React.Component {
  handleClick (val) {
    console.log('this is:', this);
  }

  render() {
    return (
      <button onClick={this.update.bind(this,{name:'111'})}>
        Click me
      </button>
    );
  }
}

通常我们会为事件处理程序传递额外的参数，建议选中bind绑定的方式，第一个参数固定为this,参数 e 作为 React 事件对象将会被作为第二个参数进行传递。

修改state为对象中的某一个属性值

针对state为对象,想要修改对象中某一个值而不修改其他值

import React, { Component } from 'react'
import Child from '../components/index'

export default class index extends Component {
  constructor(props){
    super(props);
    this.state = {
      msg:'我是从父组件传过来的18',
      json:{
        msg:'chen ll',
        name:'chen ll'
      }
    }
  }
  update(){
    let data = Object.assign({}, this.state.json, { msg: '2222' })
    this.setState({json: data})
    console.log(this.state.json)
  }
  render() {
    return (
      <div>
        <Child msg={this.state.msg} childs={this.childs}></Child>
        {this.state.json.msg}
        <button onClick={this.update.bind(this)}>11111111</button>
      </div>
    )
  }
}

组件的隐藏

原理：通过display元素控制

import React, { Component } from 'react'
import Child from '../components/index'

export default class index extends Component {
  constructor(props){
    super(props);
    this.state = {
      msg:true,
      json:{
        msg:'chen ll',
        name:'chen ll'
      }
    }
  }
  update(){
    this.setState(prevState => ({
      msg: !prevState.msg
    }));
  }
  render() {
    return (
      <div>
        <Child msg={this.state.msg}></Child>
        <button onClick={this.update.bind(this)}>11111111</button>
      </div>
    )
  }
}

Child组件

import React, { Component } from 'react'

export default class index extends Component {
    constructor(props){
        super(props);
        this.state = {
            msg : props.msg
        }
    }
    componentWillReceiveProps(nextProps) {
        this.setState({msg: nextProps.msg});
    }

    render() {
        return (
        <div style={{'display':this.state.msg?'block':'none'}}>
            22222222
        </div>
        )
    }
}