React基础

1.useState()

useState是一个React Hook(函数)，它允许我们向组件添加一个状态变量，从而控制影响组件的渲染结果

import { useState } from "react";

function App() {
  // 渲染列表
  function renderList(itemList) {
    return itemList.map((item, index) => <h3 key={index}>{item.name}</h3>);
  }

  function forIm(itemList) {
    let text = "";
    for (const key in itemList) {
      text += itemList[key];
    }
    return text;
  }
  let [listName, setListName] = useState([
    { name: "John", age: 20 },
    { name: "Jane", age: 25 },
    { name: "Doe", age: 30 },
  ]);

  let [xiaoming, serXiaoming] = useState({
    name: "小明",
    age: 18,
  });
  function logy(e, name) {
    console.log("yaojunhao logy", name);
    console.log("yaojunhao logy", e);
    setListName([...listName, { name: "Daxoe", age: 20 }]);

    console.log("yaojunhao xiaoming", xiaoming);
    serXiaoming({ ...xiaoming, sex: "男" });
  }
  return (
    <div className="App">
      <h1>This is React App</h1>
      <button onClick={(e) => logy(e, "Hello World!")}>按钮</button>
      {renderList(listName)}
      <p></p>
      {forIm(xiaoming)}
    </div>
  );
}

export default App;

1. React Hooks

React Hooks是React 16.8版本引入的一个重要特性，允许在函数组件中使用状态和其他React特性。常用的React Hooks包括：

useState：用于在函数组件中添加状态。它接收一个初始状态，并返回一个状态变量和一个更新该状态的函数。

useEffect：用于在函数组件中执行副作用操作，如数据获取、订阅或手动更改DOM等。它接收一个函数作为第一个参数，该函数会在组件渲染到屏幕后执行。

useContext：用于在组件树之间共享状态。它通过React的Context API实现，允许组件跨层级访问共享数据，避免了prop drilling的问题。

useReducer：用于管理复杂的状态逻辑。它接收一个reducer函数和一个初始状态，并返回一个状态对象和dispatch函数，类似于Redux中的用法。

useCallback：用于缓存函数引用，避免在每次渲染时都重新创建函数，从而优化性能。它接收一个函数作为第一个参数，该函数会在依赖项发生变化时重新创建。

useMemo：用于缓存计算结果，避免在每次渲染时都重新计算。它接收一个创建值的函数和一个依赖项数组，仅当依赖项发生变化时才会重新计算值。

useRef：用于在函数组件之间持久保存数据，类似于在类组件中使用实例变量。它返回一个可变的ref对象，其.current属性被初始化为传入的参数。

useLayoutEffect：其用法与useEffect类似，但会在所有DOM变更后同步调用。适用于需要立即读取DOM布局或同步重绘的场景。

useImperativeHandle：用于在函数组件中使用ref时，自定义暴露给父组件的实例值。它允许父组件通过ref调用子组件中的方法或访问子组件的状态。

这些Hooks涵盖了状态管理、副作用处理、性能优化、DOM操作等各个方面，为开发者提供了强大的工具，大幅提高了开发效率和代码质量。