react教程 — 组件

一、state使用：

　　1、什么时候不能设置state（或没有必要设置）：

　　　　a、constructor、

　　2、默认的 state 值，一定要在初始化设置。因为，render 比 setState 早。

　　3、所有的组件中都加上 shouldComponentUpdate 生命周期，只对组件自己的props改变，才更新组件。屏蔽调意外的代码执行。

二、props 的使用：

　　1、上面地方可以正常获取 props的值

三、回调渲染模式：https://blog.csdn.net/weixin_30732487/article/details/99894871 或 https://segmentfault.com/a/1190000016885832?utm_source=tag-newest

　　1、这种模式中，组件会接收某个函数作为其子组件，然后在渲染函数中以 props.children 进行调用：

<Twitter username='tylermcginnis33'>
  {(user) => user === null
    ? <Loading />
    : <Badge info={user} />}
</Twitter>

import React, { Component, PropTypes } from 'react'
import fetchUser from 'twitter'
class Twitter extends Component {
  state = {
    user: null,
  }
  static propTypes = {
    username: PropTypes.string.isRequired,
  }
  componentDidMount () {
    fetchUser(this.props.username)
      .then((user) => this.setState({user}))
  }
  render () {
    return this.props.children(this.state.user)
  }
}

四、组件传值：

　　1、

　　2、Context： https://www.cnblogs.com/littleSpill/p/11221538.html

　　概念：Context提供了一种方式，能够让数据在组件树中传递，而不必一级一级手动传递。

　　个人理解：感觉有点想，父组件把值给第三方保管（Context对象），孙组件，从第三方那拿值。但是这种处理，感觉不好。

　　　　　　　一般组件，都是分不同的组件的文件的。父组件和孙组件要使用同一个context对象，所以，这个context 要单独放在一个文件中，供这个两个组件使用。

import React, { Component, createContext } from 'react';

const BatteryContext = createContext(); 

class Leaf extends Component {  // 声明一个孙组件
    render() {
      return (
        <BatteryContext.Consumer>   // Consumer内 回调函数，值作为参数传递进来
          {
            battery => <h1>Battery : {battery}</h1>
          }
        </BatteryContext.Consumer>
      )
    }
  }

class Middle extends Component {  // 声明一个子组件
  render() {
    return <Leaf /> 
  }
}

class App extends Component {  // 声明一个父组件
  render(){
    return (
      <BatteryContext.Provider value={690}>
        <Middle />
      </BatteryContext.Provider>
    );
  }
}

export default App;

最后再提示一下大家，不要滥用context，不然会影响组件的独立性。如果一个组件中只使用一个Context的话，就可以使用contextType代替Consumer。详见 https://www.cnblogs.com/littleSpill/p/11221817.html

五、注意事项（也可以说是避免问题）：react 中生命周期设计的机制，很容易引起一些问题。组件生命周期参考：https://www.cnblogs.com/wfblog/p/11842622.html

　　1、有的生命周期中不能设置 state（或有条件的设置）不然会陷入死循环。比如 render，componentWillUpdate、componentDidUpdate（设置好条件才可以更新）等。后续在补充。。。

　　2、父组件一旦设置 state ，就会递归执行所有子组件的 render，有的子组件是不需要更新的后续在补充。。。

　 3、ajax请求，最好还是放在使用的组件内进行请求。如果在父组件中请求，因为请求是异步，所以挂载阶段，父组件传递给子组件的props 是undefined。子组件使用 undefined 的属性，是会报错的。

　　　　如果要在父组件上请求，需要给 props 的值，设置值。初始值可以是空对象，主要子组件使用时，不出现使用 undefined的属性，就可以。如 undefined.name，就会报错的。

六、