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，就会报错的。

六、

巴特西

react教程 — 组件

最新文章

热门文章