React 面向组件编程

React面向组件编程开发
React组件分为函数式组件和类组件两种。最大的区别在于他们声明和使用的不同。

1.函数式组件
函数式组件，就是利用函数进行编程，是一种编程范式。以函数作为主要载体的编程方式，用函数去拆解、抽象一般的表达式，最小‘可视’单位是函数的一种编码规范，重点体现‘函数式’。

例子：
//1.创建函数式组件
function MyConent(){
console.log(this);
return

我是用函数定义的组件

}
//2.渲染组件到页面
ReactDOM.render(,document.getElementById(‘test’))

一般而言函数式组件适用于简单组件的使用。

2.类组件
类组件，就是利用类进行编程，是另外一种编程范式。以类作为主要载体的编程方式。

例子：
//1.创建类式组件
class MyConent() extends React.Component {
render() {
//render是放在MyConent的原型对象上，供实例使用。
//render中的this是MyConent的实例对象 <=>MyConent组件实例对象。
return

我是用类定义的组件

}
}
ReactDOM.render(,document.getElementById(‘test’));

一般而言类组件适用于复杂组件的使用

区别
1.函数组件是一个纯函数，它接收一个props对象返回一个react元素；而类组件需要去继承React.Component并且创建render函数返回react元素。
2.函数组件没有生命周期钩子和状态state，而类组件有。因为所有的生命周期钩子和state都来自于继承的React.Component中
3.函数组件ReactDOM.render的过程：
（1）React解析组件标签，找到了MyComponent组件。
（2）发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
4.类组件中ReactDOM.render的过程：
（1）React解析组件标签，找到MyComponent组件。
（2）发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
（3）将render返回的虚拟DOM转为真实的DOM，随后呈现在页面中
5. 函数组件看似只是一个返回值是DOM结构的函数，其实它的背后是无状态组件（Stateless Components）的思想。函数组件中，你无法使用State，也无法使用组件的生命周期方法，这就决定了函数组件都是展示性组件（Presentational Components），接收Props，渲染DOM，而不关注其他逻辑。
6. 函数组件中没有this。所以你再也不需要考虑this带来的烦恼。而在类组件中，你依然要记得绑定this这个琐碎的事情。如示例中的sayHi。
6. 函数组件更容易理解。当你看到一个函数组件时，你就知道它的功能只是接收属性，渲染页面，它不执行与UI无关的逻辑处理，它只是一个纯函数。而不用在意它返回的DOM结构有多复杂。

在过去都认为函数组件性能比类组件好，但是在现代浏览器中，闭包和类的原始性能只有在极端场景下才会有明显的差别。性能主要取决于代码的作用，而不是选择函数式还是类组件。尽管优化策略有差别，但性能差异可以忽略不计。并且React 16.8 新增了Hook它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。让两者的区别也大大缩小。
hook：https://zh-hans.reactjs.org/docs/hooks-rules.html