react函数式组件全方位阐述

一、react函数式组件下标问题

在react函数式组件中，下标参数不能直接在组件中进行修改，因为这会违背react的单向数据流原则，容易引发数据不稳定。可以考虑传入父组件中的state，通过父组件的state来控制下标的改变。

示例代码：

const [currentIndex, setCurrentIndex] = useState(0); // 父组件传入
const changeIndex = () => {
  setCurrentIndex(currentIndex + 1);
}
return (
    {data[currentIndex].title}
)

二、react函数式组件不能继承

与类组件不同，函数式组件是无法通过extends实现继承的。这是因为函数组件本身只是一个函数，而不是一个对象。如果需要实现复用代码，可以考虑使用高阶组件或render props等方式。

示例代码：

// 高阶组件
const withLogin = (Component) => {
  const isLoggedIn = true; // 可以来自context或redux
  return () => {
    return isLoggedIn ?  : 
请先登录
  }
}
const Profile = () => {
  return 
  
用户信息
  
}
const ProfileWithLogin = withLogin(Profile);

// render props
const LoginStatus = ({ children }) => {
  const isLoggedIn = true; // 可以来自context或redux
  return children(isLoggedIn);
}
const Profile = () => {
  return (
    
      {isLoggedIn => isLoggedIn ? 
   
用户信息
   
 : 
   
请先登录
}
    
  
  )
}

三、react函数式组件处理请求

在函数式组件中，请求数据需要使用副作用hook，如useEffect、useCallback等。在useEffect中发起异步请求，并将请求结果保存在state中。为了避免尝试在组件卸载后更新state导致的错误，可以在useEffect中返回一个函数，用于取消异步请求。

示例代码：

const [data, setData] = useState(null);
const [isLoading, setIsLoading] = useState(false);
const fetchData = async () => {
  setIsLoading(true);
  try {
    const result = await axios.get('/api/data');
    setData(result.data);
    setIsLoading(false);
  } catch (error) {
    console.log(error);
    setIsLoading(false);
  }
}
useEffect(() => {
  fetchData();
  return () => {
    // 取消异步请求
  }
}, []);
return (
  {isLoading ? 
Loading...
 : 
  
{data.title}
  
}
)

四、react函数式组件中的参数会改变吗

react函数式组件中的参数是不可变的，即使在函数组件中尝试修改参数的值，也不会影响到外部的数据。这是因为react组件重新渲染时，会重新生成一份新的props，而不是直接修改原有的props。

示例代码：

const Text = ({ content }) => {
  content = content.toUpperCase(); // 不会影响到外部传入的值
  return 
  
{content}
  
;
}
const Parent = () => {
  const [text, setText] = useState('hello');
  const handleClick = () => {
    setText('world');
  }
  return (
    
  

      Change Text
      
    
  
  )
}

五、react函数式组件初始化数据

在react函数式组件中，可以使用useState来初始化state的值。useState返回一个数组，第一个参数为state，第二个参数为设置state的函数。需要注意的是，useState只在组件首次渲染时执行一次，之后不会再次执行。

示例代码：

const [count, setCount] = useState(0);
const handleClick = () => {
  setCount(count + 1);
}
return (
  
  

    
   
当前计数为：{count}
    加1
  
  
)

六、react函数式组件为什么会重新执行

react函数式组件会在以下情况下重新执行：

• 组件的props发生了变化
• 组件内部调用了setState函数
• 父组件重新渲染时
• 全局状态发生了变化（如context或redux）

因此在编写函数组件时，要注意控制传入的props和state的变化，避免不必要的渲染。

示例代码：

const Text = ({ content }) => {
  const date = useRef(new Date()); // 使用ref避免在每次渲染时创建新的Date对象
  return (
    
  

      
   
{content}
      
   
{date.current.toLocaleString()}
    
  
  );
}
const Parent = () => {
  const [text, setText] = useState('hello');
  const handleClick = () => {
    setText('world'); // 修改state，触发Text组件的重新渲染
  }
  return (
    
  

      Change Text
      
    
  
  )
}

七、react函数式组件和类组件

react函数式组件和类组件都可以用来编写react组件，它们各有优劣：

• 函数式组件更加简洁，没有this指针，没有生命周期，易于测试和复用。
• 类组件功能更加完善，拥有生命周期函数和this指针，可以实现更复杂的功能。

在一些简单的场景下，可以优先选择函数式组件。而在一些需要复杂逻辑和生命周期函数的场景下，可以优先选择类组件。

八、react函数组件传值

在react函数组件中，数据的传递可以通过props进行。可以通过父组件传递props，也可以通过context或redux进行全局状态的管理。同样也可以使用hooks进行状态的传递。

示例代码：

// 通过props传递数据
const Child = ({ name }) => {
  return 
  
{name}
  
;
}
const Parent = () => {
  return ;
}

// 通过context传递数据
const MyContext = React.createContext();
const Child = () => {
  const { name } = useContext(MyContext);
  return 
  
{name}
  
;
}
const Parent = () => {
  return (
    
      
   
    
  
  )
}

// 通过hooks传递数据
const Child = () => {
  const [name, setName] = useState('Tom');
  useEffect(() => {
    setName('Jerry');
  }, []);
  return 
  
{name}
  
;
}
const Parent = () => {
  return ;
}

九、react类和函数的区别

react类组件和函数式组件的差异并不只体现在写法上，更多的是在实现上有所不同。具体来说，有以下几个方面的差异：

• 函数式组件不支持生命周期函数，而类组件可以在特定情况下执行生命周期函数，具备更为丰富的功能。
• 函数式组件没有this指针，而类组件中的this指的是类本身，方便在组件内部进行状态管理和方法调用。
• 函数式组件性能更高，它们是纯函数，不会出现同名方法或对象。
• 函数式组件更加易于测试和复用，不存在this指针或生命周期函数的影响，也不需要编写构造函数等。

在选择使用函数式组件还是类组件时，需要考虑到具体应用场景和功能需求，做出合理的选择。