了解react函数式组件原理，并且实现react-hooks功能源码

在React中，函数式组件是无状态和无生命周期管理的组件，但是我们可以通过Hooks来给函数式组件添加状态和生命周期管理的能力。

下面是一个简单的自定义Hook，用于添加组件的状态：

import React, { useState, useEffect, useRef } from 'react';
 
function useStateful(initialValue) {
  const [value, setValue] = useState(initialValue);
  const isMounted = useRef(false);
 
  useEffect(() => {
    isMounted.current = true;
    return () => {
      isMounted.current = false;
    };
  }, []);
 
  const updateValue = (newValue) => {
    if (isMounted.current) {
      setValue(newValue);
    }
  };
 
  return [value, updateValue];
}
 
// 使用函数式组件
const FunctionalComponent = () => {
  const [count, setCount] = useStateful(0);
 
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
};
 
export default FunctionalComponent;

在这个例子中，我们创建了一个名为useStateful的Hook，它提供了一个可以管理状态的函数式组件的示例。通过useRef来创建一个可以跨重新渲染保持值的引用类型。通过useEffect添加挂载和卸载时的逻辑，以确保我们不会在组件卸载后更新状态。这个Hook可以被任何函数式组件复用，为其添加状态管理的能力。