本节将开启React框架进阶学习第二篇
如果还没有学习 1-1 ~ 1-6 React框架基础的话，建议点我开始React框架基础学习
文章系列（React框架进阶）
大家好，我是Counterrr
不忘初心，砥砺前行
本文目录
一、React函数组件的介绍
二、默认Props
1、React函数组件：
还记得我们之前写了一个随机选择学习语言小项目，最后也用React组件话开发的方式给它重构了，那么为了方便，这边就不在重新再去写个小项目，到以后真正实战回去写其他项目，这边为了方便直接使用之前的小项目，会更快上手。
好的我们知道我们之前写的项目都是通过class类来继承React.Component这个类，那么我们称它为类组件，那React函数组件又是什么样的呢？首先来看下函数组件的英文全称：stateless functional component，stateless这个单词是不是很眼熟，没错我们在定义类组件的时候用到state，那用到这个有什么好处，是不是只要state里的值一改变模板就会重新渲染，那这个stateless就意味着我们函数组件中一定不能有state这个属性，那么我们就可以写成函数组件，那么我们看看哪些类组件里没有这个属性：
Header类组件：
class Header extends React.Component {
render () {
return (<header>
<div>{this.props.obj.title}</div>
<div>{this.props.obj.des}</div>
<div>{this.props.obj.tips}</div>
</header>)
}
}
ButtonActive类组件：
class ButtonActive extends React.Component {
constructor (props) {
super(props)
}
render () {
return (<div>
<button onClick={this.props.removeAllFunc}>清除</button>
<button disabled={this.props.isDisabled} onClick={this.props.selectLanFunc}>选择学习的语言</button>
</div>)
}
}
Options类组件：
class Options extends React.Component {
render () {
return (<ul>
<Option languages={this.props.languages}/>
</ul>)
}
}
Option类组件：
class Option extends React.Component {
render () {
return (
this.props.languages.map((item, index) => {
return <li key={`option${index}`}>{item}</li>
})
)
}
}
接着我们把它们改成函数组件：
Header函数组件：
const Header = (props) => {
return (<header>
<div>{props.obj.title}</div>
<div>{props.obj.des}</div>
<div>{props.obj.tips}</div>
</header>
)
}
ButtonActive函数组件：
const ButtonActive = (props) => {
return (<div>
<button onClick={props.removeAllFunc}>清除</button>
<button disabled={props.isDisabled} onClick={props.selectLanFunc}>选择学习的语言</button>
</div>)
}
Options函数组件：
const Options = (props) => {
return (<ul>
<Option languages={props.languages}/>
</ul>)
}
Option函数组件：
const Option = (props) => {
return (
props.languages.map((item, index) => {
return <li key={`option${index}`}>{item}</li>
})
)
}
好的我们已经将4个类组件改成了函数组件，可以发现我们这个函数组件接收一个参数，那就是父组件传递过来的props，并且在内部没有了render函数，我们直接去返回jsx语法，并且函数组件里面就没有this这个指向，我们要获取父组件传递过来的值，直接在传递过来的参数props中去获取。
那这也写有什么好处，更加的简洁的操作，运行速度也比创建类组件快。那有什么坏处，那就是不能够去写state属性。好的接下来我们重新去跑跑我们的网页，发现还是没问题的，函数组件我们就写完了。
2、默认Props：
我们在Vue中如果父组件不传递值的话，子组件是通过props对象下的default去设置我们的值，那么在React中怎么去设置默认值呢？我们那MySelectLanApp类组件来演示，在MySelectLanApp类组件上加上这段代码，代码如下：
MySelectLanApp.defaultProps = {
languages: ['React', 'Vue']
}
并且修改MySelectLanApp类组件中的state，如下：
this.state = {
languages: props.languages
}
可以发现此时页面显示如下：
可以发现我们在类上去定义了defaultProps字段，然后就可以用props.字段语法将默认值取出。
我们再那Header函数组件来演示下，在Header函数组件下加上这段代码：
Header.defaultProps = {
obj: {
title: '今天学习了吗？',
des: '大家好，我爱撸码。',
tips: '如果学不死就往死里学。'
}
}
然后在MySelectLanApp类组件，不要去传这个obj属性，并且删除obj对象，在render函数中Header函数组件写成<Header/>，当我们没有去传值，则会去走默认值，可以看到页面如下：
