手挽手带你学React：二档 React生命周期以及组件开发

手挽手带你学React入门二档,组件开发的开始，合理运用生命周期和组件，能够让你的开发变地流利又happy,这篇文章带你学会创建组件，运用组建。学起来吧！React 组件生命周期学习React，生命周期很重要，我们了解完生命周期的各个组件，对写高性能组件会有很大的帮助.我们先来看一张图<img src=“http://img.henrongyi.top/reac...; />组件初始化的时候1、getDefaultProps()设置默认的props，也可以用dufaultProps设置组件的默认属性.2、getInitialState()在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props3、componentWillMount()组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。4、 render()react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。5、componentDidMount()组件渲染之后调用，只调用一次。组件更新的时候6、componentWillReceiveProps(nextProps)组件初始化时不调用，组件接受新的props时调用。7、shouldComponentUpdate(nextProps, nextState)react性能优化非常重要的一环。组件接受新的state或者props时调用，我们可以设置在此对比前后两个props和state是否相同，如果相同则返回false阻止更新，因为相同的属性状态一定会生成相同的dom树，这样就不需要创造新的dom树和旧的dom树进行diff算法对比，节省大量性能，尤其是在dom结构复杂的时候8、componentWillUpdata(nextProps, nextState)组件初始化时不调用，只有在组件将要更新时才调用，此时可以修改state，render 的时候会用你更改的值，但是这里面不能调用 this.setState()，会让你陷入死循环9、render()组件渲染10、componentDidUpdate()组件初始化时不调用，组件更新完成后调用，此时可以获取dom节点。组件卸载的时候11、componentWillUnmount()组件将要卸载时调用，一些事件监听和定时器需要在此时清除。// 在我们组件第一次加载完的时候会这样执行生命周期export default class App extends Component { constructor(){ super() this.state={ } } // getDefaultProps(){ // es6 不支持这个 // console.log(‘1.执行getDefaultProps’) // 具体用法在下面 // } // getInitialState(){ // es6里不用它了 // console.log(‘2.执行getInitialState’) // 这个实际上是上面的state 在 constructor实现 // } componentWillMount(){ console.log(‘3.执行componentWillMount’) } render() { console.log(‘4.执行render’) return ( ) } componentDidMount(){ console.log(‘5.执行componentWillMount’) }}// 接 getDefaultProps// 在ES6里这么玩// 还有一种玩法是ES7里面的// static defaultProps = { // name: ‘demo’ // }; 这里我们不多讲了。。讲多了该晕了 感兴趣的加我微信 shouzi_1994App.defaultProps = { name: ‘demo’};// 在我们组件更新的时候我们进行如下生命周期export default class App extends Component { constructor(){ super() this.state={ name:’test’ } } componentWillReceiveProps(nextProps){ // props 更新的时候调用 console.log(‘1.执行componentWillReceiveProps’) } shouldComponentUpdate(nextProps, nextState){ console.log(‘2.执行shouldComponentUpdate’) // 这个需要着重强调，我们优化性能用它很重要！如果我们即将更新的东西和原来的数据相同，return一个false就停止组件更新节约性能 if(nextState.name == this.state.name){ return false }else{ return true } } componentWillMount(nextProps, nextState){ // 在组件渲染前 调用这个 console.log(‘3.执行componentWillMount’) } change=()=>{ this.setState({name:‘QM’}) } render() { console.log(‘4.执行render’) return ( <button onClick={this.change}>测试</button> ) } componentDidUpdate(){ console.log(‘5.执行componentDidUpdate’) } componentWillUnmount(){ // 这个在卸载的时候会调用 业务逻辑写里面就好了 }}生命周期简单介绍就这些了，真正工作中要根据业务需求来调用，大大增加你的开发效率，处理你开发中遇到的难题。组件创建其实我们前面的App实际上就是一个组件了，我们类比到vue里面，它就是脚手架为我们创建的App.vue 是一个根组件，我们别的组件都渲染到这个组件的内部就好了。那么 我们如何创建一个子组件呢？export default class App extends Component { constructor(){ super() this.state={ } } render() { //要想使用子组件也很简单 用标签的形式拿进来就好了 return ( <Children /> ) } }//下面我们再写一个class 并且继承 Component 这就是一个组件了class Children extends Component{ constructor(){ super() this.state={ } } render(){ return( <h1>我是子组件</h1> ) }}组件传参我们学会了如何创建组件，那么组件怎么传参呢？这个是非常重要的东西，毕竟组件之间不能通讯，那就没有创建它的意义了。父子传参在React中父子传参极其类似Vue 直接在标签上填写属性，但是在子组件接收的时候会有所不同我们接着使用上面的代码export default class App extends Component { constructor(){ super() this.state={ } } render() { //要想使用子组件也很简单 用标签的形式拿进来就好了 return ( <Children params={“我从父组件传过来”}/> ) } }//下面我们再写一个class 并且继承 Component 这就是一个组件了class Children extends Component{ constructor(){ super() this.state={ } } // 通过这种形式 我们就可以把父组件的东西传递给子组件了，所有的属性存储在props里面，上面我们介绍生命周期的时候，也提了一下如何创建默认props。这里我们写一下 render(){ return( <div> <h1>我是子组件</h1> <h2>{this.props.params}</h2> </div> ) } // 如果父组件没有传递 params 我们又想使用默认的props 那么就要使用下面的写法}Children.defaultProps = { params: ‘我是默认的东西’};// 设置了默认props以后 如果我们不传参就会默认展示我们默认规定好的属性了插槽（类似Vue solt）为什么要把插槽放在这里讲解呢？实际上React的插槽是通过传参的形式下来的，怎么理解呢？我觉得放进代码中是最容易理解的。export default class App extends Component { constructor(){ super() this.state={ } } render() { //要想使用子组件也很简单 用标签的形式拿进来就好了 return ( <Children params={“我从父组件传过来”}> <div>传递第一个</div> <div>传递第二个</div> <div>传递第三个</div> </Children> ) } }//下面我们再写一个class 并且继承 Component 这就是一个组件了class Children extends Component{ constructor(){ super() this.state={ } } // 通过这种形式 我们就可以把父组件的东西传递给子组件了，所有的属性存储在props里面，上面我们介绍生命周期的时候，也提了一下如何创建默认props。这里我们写一下 render(){ console.log(this.props) // {children:Array(3) // params:“我从父组件传过来”} // children的内容为 [ // {$$typeof: Symbol(react.element), type: “div”, key: null, ref: null, props: {…}, …}, // {$$typeof: Symbol(react.element), type: “div”, key: null, ref: null, props: {…}, …}, // {$$typeof: Symbol(react.element), type: “div”, key: null, ref: null, props: {…}, …} // ] //我们可以看到 他们被顺序放到了 this.props.children中 并且 这是个数组 内部存储的就是虚拟dom return( <div> <h1>我是子组件</h1> {/* 这里我用循环的方式把三个children取出来直接渲染即可 /} {this.props.children.map((item,key)=>{ return item })} {/ 我们更加直观一点 /} {this.props.children[1]} {this.props.children[0]} {this.props.children[2]} {/ 看到这里大家应该可以知道插槽的简单用法了吧 /} </div> ) } // 如果父组件没有传递 params 我们又想使用默认的props 那么就要使用下面的写法}Children.defaultProps = { params: ‘我是默认的东西’};子传父参在Vue中我们可以通过定义函数，以实参的形式传递，在父组件捕获的形式来获取想要传递的参数，那么在React中这个办法是否也同样适用呢？答案是肯定的，依旧是通过父组件声明函数，传递给子组件，子组件调用并传入参数，在父组件捕获即可。export default class App extends Component { constructor(){ super() this.state={ myPatams:“test” } } getParams(params){ console.log(params,this) this.setState({ myPatams:params }) } render() { //要想使用子组件也很简单 用标签的形式拿进来就好了 return ( <div> {this.state.myPatams} <Children params={“我从父组件传过来”} getParams={this.getParams.bind(this)}></Children> {/ 这里我们把函数传递下去，一定要bind this 否则在我们在子组件中使用bind来调用的时候，this的指向会跑到子组件中 我们拿到的参数意义就不大了 当然箭头函数也是完全没问题的 /} </div> ) } }//下面我们再写一个class 并且继承 Component 这就是一个组件了class Children extends Component{ constructor(){ super() this.state={ } } render(){ return( <div> <h1>我是子组件</h1> <button onClick={this.props.getParams.bind(this,“我是子传过来的参数”)}>子传父参</button> {/ 我们在这里调用父组件传递过来的方法，并且传入参数 /} </div> ) }}Children.defaultProps = { params: ‘我是默认的东西’};非父非子传参（events 方法）这种非关系型组件传参一般使用redux来传参，这里我们还有没学习到，我们借助node的EventEmitter也可以轻松实现import React,{Component} from ‘react’// 首先我们创建一个监听器import EventEmitter from ’events’; //事件监控对象let emitter = new EventEmitter; //创建一个事件监控者 普通级别的监听emitter.setMaxListeners(100000); //设置监控管理器的最大监听数量export default class App extends Component { constructor(){ super() this.state={ myPatams:“test” } } getParams(params){ console.log(params,this) this.setState({ myPatams:params }) } render() { //要想使用子组件也很简单 用标签的形式拿进来就好了 return ( <div> {this.state.myPatams} <Children params={“我从父组件传过来”} getParams={this.getParams.bind(this)}></Children> {/ 这里我们把函数传递下去，一定要bind this 否则在我们在子组件中使用bind来调用的时候，this的指向会跑到子组件中 我们拿到的参数意义就不大了 当然箭头函数也是完全没问题的 /} <ChildrenTwo /> </div> ) } }//下面我们再写一个class 并且继承 Component 这就是一个组件了class Children extends Component{ constructor(){ super() this.state={ emit:”" } } componentWillMount(){ emitter.on(‘childrenEmit’,(param)=>{ //我们在这里设置监听 console.log(param) this.setState({ emit:param }) }) } render(){ return( <div> <h1>{this.state.emit}</h1> <button onClick={this.props.getParams.bind(this,“我是子传过来的参数”)}>子传父参</button> {/ 我们在这里调用父组件传递过来的方法，并且传入参数 /} </div> ) }}class ChildrenTwo extends Component{ constructor(){ super() this.state={ } } gaveParams(param){ emitter.emit(‘childrenEmit’,param) //从第二个子组件触发并且传递参数 } render(){ return( <div> <h1>我是子组件</h1> <button onClick={this.gaveParams.bind(this,“我是ChildrenTwo传过来的参数”)}>非父非子传参</button> </div> ) }}组件抽离写了这么多，相信大家差不多会写自己的组件并且在组件中传递参数了，这里还有一个问题，大家是不是发现我的所有组件都写在了一个JS内部，这样如果是一个大项目，我们的这个JS就会变地非常臃肿，这时候我们就要抽离这个组件。实际上非常简单，用到的就是我们ES6的 export 导出 即可 如果只有一个组件 那么 还可以像我们书写App这个基础组件一样 使用 export default 默认导出这里我给大家抽离一下// App.jsimport React,{Component} from ‘react’import {Children} from ‘./components/Children.js’ // 因为我们的Children中使用的是 export 来暴露//import Children from ‘./components/Children.js’ // 如果使用的是 export default 则应该这样写export default class App extends Component { constructor(){ super() this.state={ myPatams:“test” } } getParams(params){ console.log(params,this) this.setState({ myPatams:params }) } render() { //要想使用子组件也很简单 用标签的形式拿进来就好了 return ( <div> {this.state.myPatams} <Children params={“我从父组件传过来”} getParams={this.getParams.bind(this)}></Children> {/ 这里我们把函数传递下去，一定要bind this 否则在我们在子组件中使用bind来调用的时候，this的指向会跑到子组件中 我们拿到的参数意义就不大了 当然箭头函数也是完全没问题的 /} </div> ) } }// children.jsimport React,{Component} from ‘react’// 当我们抽离出来以后 必须要再次引入 react的必要组件export class Children extends Component{ //我们这里使用的是export来暴露 如果只有一个组件 也可以使用 export default 来暴露 constructor(){ super() this.state={ } } render(){ return( <div> <h1>我是子组件</h1> <button onClick={this.props.getParams.bind(this,“我是子传过来的参数”)}>子传父参</button> {/ 我们在这里调用父组件传递过来的方法，并且传入参数 */} </div> ) }}Children.defaultProps = { params: ‘我是默认的东西’};大功告成了 代码是不是清晰多了？？总结这一期内容不多 主要是介绍组件的生命周期 使用方法 以及如何传参，这些内容可全都是干货，工作中会经常经常使用到，希望大家能自己写小demo来熟悉一下写法，下一期将会带大家学习React-Router 以及context和高阶组件的创建，为我们学习Redux打下基础视频制作中