Think of an interface as a function V, with states and properties

V = (props, state) => {... }Copy the code

See UI as a function. UI = interface functions use hook1, hook2……

UI = V(props, state) useHook1() useHook2() ...
Copy the code

Hooks can be roughly divided into state hooks, effect hooks, and context hooks. They are all used on the interface through hooks, which are functions for changing state, generating action, and changing context

As shown in Figure 1, effects change state through behavior, and state drives the view. Where: the property must be constant, only the state will changeFor example, onClick is a property on the view that defines the action that triggers the action function. The action function is an asynchronous action that changes the state on which the F function depends, which drives the view’s changes

import { useXXX } from '... 'const UI = () => {// state const state = {a:1, b:2, C :3} const action = async () => {const res = await fetchData() state.xxx = res}  setCount] = useState(0) // use effect hook useEffect(() => { setTimeOut(() => { setCount(count+1) }, 1000)}) // use other hook useXXX() OnClick ={() => {state.a = ++state.a}} return (//onClick is a property <div onClick={action}> {a} {b} {c} {count} </div>) }Copy the code