[React]入门 I

JSX语法基础

相比于vue使用 tamplate 和 script 区分格式代码和逻辑代码，react使用函数返回JSX的方式链接格式和逻辑。

const page: FC = () => {
    // FC: FunctionComponent

    return (
        <div>
            etc code...
        </div>
    )
}

react中的响应式

const [cnt, setCnt] = useState(0)

基础响应式

使用useState来创建响应式变量

useEffect(() => {
  // 副作用
  document.title = `Count: ${count}`;
}, [count]); // 依赖数组

类watch

在依赖数组中发生变化的时候执行副作用

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a, b), [a, b]);

类computed

在依赖函数变化后更新 暂存值(memo)/回调函数(callback)

react中的父子穿参

props(Fa -> Son)

// 父组件
function Parent() {
  const [message] = useState('Hello from parent');
  
  return <Child message={message} />;
}

// 子组件
function Child(props) {
  return <div>{props.message}</div>;
}

Child(props) 可以使用 Child({ msg }) 来结构穿参

emit(Son -> Fa)

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log('Data from child:', data);
  };
  
  return <Child onData={handleData} />;
}

// 子组件
function Child({ onData }) {
  const sendData = () => {
    onData('Hello from child');
  };
  
  return <button onClick={sendData}>Send Data</button>;
}

在子组件中调用回调函数onData来触发headleData，并且将数据传入data

使用Context跨多层传输

// 创建Context
const MyContext = React.createContext();

// 父组件
function Parent() {
  return (
    <MyContext.Provider value="Shared data">
      <Child />
    </MyContext.Provider>
  );
}

// 子组件（可以是任意层级的后代）
function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

在父子组件分文件时，需要讲Context单独提取，并创建hook供子组件使用。