React中函数组件和类式组件

定义组件有两个要求：
     组件名称必须以大写字母开头
     组件的返回值只能有一个根元素

1. 函数组件

函数组件也称无状态组件，顾名思义就是通过函数编写的形式去实现一个React组件，是React中定义组件最简单的方式。
在 hooks 出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态和生命周期方法，没有业务逻辑代码，是一个纯函数。
它接收一个props对象作为参数用于接收父组件传递过来的参数，并返回一个React元素。
函数式组件通常比类组件更轻量级，因为它们没有状态和生命周期方法的开销。在大多数情况下，它们也比类组件更容易优化和测试，因为它们遵循纯函数的设计原则，输入相同则输出相同，不会产生副作用。

<script type="text/babel">/* 此处一定要写 babel */
    // 1.创建函数式组件
        function Demo(props){
            console.log(this) //此处的this是undefined，因为babel编译后开启了严格模式
            return <h2>函数组件，简单组件：{props.title}</h2>
        }
    // 渲染组件到页面
        // ReactDOM.render(Demo(),document.getElementById('app'))
        ReactDOM.render(<Demo/>,document.getElementById('app'))
        /*
            执行了ReactDOM.render(<Demo/>.......之后，发生了什么?
            1.React解析组件标签，找到了Demo组件。
            2.发现组件是使用函数定义的，随后调用该函数，将返回的虚拟DOM转为真实DOM，随后呈现在页面中。
        */
    </script>

2. 类式组件

类组件是通过使用ES6类的编写形式去编写组件，是一个JavaScript类，它继承自React.Component，并实现一个render方法来返回一个React元素。它通常用类声明的方式来定义。

<script type="text/babel">/* 此处一定要写 babel */
    // 1.创建类式组件
        class Demo extends React.Component{
            //render是放在哪里的? - Demo的原型对象上，供实例使用。
            //render中的this是谁? - Demo的实例对象(Demo组件实例对象)。
            render(){
                console.log(this)
                return <h2>类组件，复杂组件</h2>
            }
        }
    // 2.渲染组件到页面
        ReactDOM.render(<Demo/>,document.getElementById('app'))
    /*
        执行了ReactDOM.render(<Demo/>.......之后，发生了什么?
        1.React解析组标签，找到了Demo组件。
        2.发现组件是使用类定义的，随后new出来该类的实例，并通过该实例调用到原型上的render方法。
        3.将render返回的虚拟DOM转为真实DOM，随后呈现在页面中。
    */
    </script>

3. 函数组件和类式组件的不同点

4. 函数组件和Hook

React Hooks 是从 React 16.8 版本推出的新特性，目的是解决 React 的状态共享以及组件生命周期管理混乱的问题。React Hooks 的出现标志着，React 不会再存在无状态组件的情况，React 将只有类组件和函数组件的概念。

使用Hooks，函数式组件可以具有以下特性：

• 状态管理：可以使用useState hook来在函数式组件中管理状态。
• 生命周期管理：可以使用useEffect hook来管理组件的生命周期。
• 上下文管理：可以使用useContext hook来在函数式组件中使用上下文。
• 引用和回调：可以使用useRef hook来获取组件的引用，并使用useCallback hook来优化回调函数的性能。

使用Hooks的函数式组件相比于类组件，具有以下优点：

• 更加简洁：函数式组件使用函数的方式来定义组件，比类组件更加简洁。
• 更加易读：由于Hooks可以将组件的逻辑分离到不同的函数中，使得组件的代码更加易读。
• 更加灵活：Hooks可以让函数式组件具有更加灵活的状态管理和生命周期管理能力，使得组件的开发更加方便。

Hook 使用规则

• 只在最顶层使用 Hook
• 只在 React 函数中调用 Hook
       React 函数组件中
       React Hook 中 - 我自己定义 hook 时，可以调用别的hook
• 所有的 hook 必须 以 use