React Basics

概念

虚拟 DOM 树和浏览器中的真实 DOM 树进行比较。当出现不一致的情况时，浏览器中 DOM 树的描述会更新为虚拟 DOM 树中的描述

import { createElement, render } from "preact";
let vdom = createElement("p", { class: "big" }, "Hello World!");
render(vdom, document.body);

使用 Babel 将 jsx 编译为 js

Class Components

class ClassComponent extends Component {
  render() {
    return <div>Example</div>;
  }
}

Simple Components

const SimpleComponent = () => {
  return <div>Example</div>;
};

Props

Hooks

useState

状态更新时整个组件会重新渲染

const [count, setCount] = useState(0);

使用异步

setCount((counter) => counter + 1);

useReducer 用于处理更复杂的数据

const initialState = { backgroundColor: "#fff" };

const reducer = (state, action) => {
  switch (action) {
    case "black":
      return { backgroundColor: "#000" };
  }
};

const [state, dispatch] = useReducer(reducer, initialState);

useEffect

在组件渲染完成后调用

内部代码只在数组内状态更新时重新调用

useEffect(() => {}, []);

useLayoutEffect 在组件渲染前调用，会阻塞代码

useContext

上下文更新时，所有使用该上下文的组件都会更新

<CounterContext.Provider value={contextValue}>
</CounterContext.Provider>

const { increment } = useContext(CounterContext)!

useRef

const titleRef = useRef()
useEffect(() => {
    console.log(titleRef.current.offsetHeight)
}, [])

<h1 ref={titleRef}>Hello</h1>

useMemo

缓存一个值，防止重新渲染

const renderedValue = useMemo(() => expensiveCalculation(), []);

重新渲染后 Props 会改变，使用 useCallback 指向同一个函数

const handleMultiplier = useMemo(() => {
  return function () {
    setCount((prevCount) => prevCount * 123);
  };
}, []);

export default memo(Multiplier);

const handleMultiplier = useCallback(() => {
  setCount((prevCount) => prevCount * 123);
}, []);

useTransition

用于处理非紧急的操作

const [isPending, startTransition] = useTransition();

const handleChange = (e) => {
  setInput(e.target.value.toLowerCase());
  startTransition(() => {});
};

{
  isPending && "Loading";
}