这次我们来学习React中的组件。组件是React的核心。
根据React官网的介绍，组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。
组件有两大特点：
1、 封装
2、 重用
好处
- 提高开发效率
- 方便复用
- 简化调试步骤
- 提升整个项目的可维护性
- 便于协同开发
组件的创建
组件创建有两种：
第一种
通过JavaScript函数创建(无状态组件)
// 创建组件 - 函数组件
function Parent() {
return (
<div>
<h2>我是小陈同学</h2>
<p>你好，小陈同学</p>
</div>
)
}
第二种
通过class创建(有状态组件)
// 创建组件 - 类组件
class Child extends React.Component {
render () {
return (
<div>
<h2>我是小陈同学</h2>
<p>你好，小陈同学</p>
</div>
)
}
}
函数组件和类组件的区别
-
接收父组件传递过来的数据方式不同
- 函数组件 - props
- 类组件 - this.props
-
状态
- 函数组件没有状态
- 类组件是有状态的，职能比较丰富具有独立的业务逻辑
-
this
- 函数组件不能访问this，若想访问的话，就得换一种创建方式
- 类组件可以访问
-
性能
- 函数组件性能更优，因为组件被精简成一个render方法的函数来实现的，由于是无状态组件，所以无状态组件就不会在有组件实例化的过程，无实例化过程也就不需要分配多余的内存，从而性能得到一定的提升。
-
生命周期
- 因为无状态组件是不需要组件生命周期管理和状态管理，所以底层实现这种形式的组件时是不会实现组件的生命周期方法。所以无状态组件是不能参与组件的各个生命周期管理的。
函数组件好处，无状态组件只能访问输入的props，同样的props会得到同样的渲染结果，不会有副作用
使用场景
- 推荐使用无状态组件(函数组件)，输入即输出，不会有任何的副作用
组件通信
-
从上到下
在组件标签上通过自定属性（key=value）的形式，进行数据的绑定
-
在子组件内部，如果是class组件通过this.props接收；如果是函数组件通过props接收
只能层层一级一级往下传递，不能跨组件传递
组件通信
在父组件中定义一个带有参数的函数，然后通过自定义 属性的方式传递给子组件
import React, { Component } from 'react'
import Baby from './baby'
class List extends Component {
// 类的构造函数
getChildData (val) {
console.log(val)
}
render () {
let { getChildData } = this
return (
<div>
<h1>父组件 - 父子组件通信</h1>
<Baby fun = { getChildData } />
</div>
)
}
}
export default List
在子组件中接收到父组件传递过来的函数，然后通过箭头函数的形式进行执行并且传递具体的数据
import React, { Component } from 'react'
class Baby extends Component {
render () {
let { fun } = this.props
return (
<div>
<hr/>
<p>子组件</p>
<button onClick={ () => { fun('123') } }>通知父组件</button>
</div>
)
}
}
export default Baby
