TLightSky / React Hooks Concepts
Created 2020-02-15 Modifyed 2020-02-15

434 Words

useEffect

useEffect(
  () => {
    const subscription = props.source.subscribe();
    return () => {
      subscription.unsubscribe();
    };
  },
  [props.source],
);

主要函数同componentDidMount componentDidUpdate, 返回的函数同componentDidUmount, 由传入的source来决定是否触发

useState

const [state, setState] = useState(initialState);

按位置挂在状态,所以外层不要有分支,不要有循环,不然可能挂载出错

内容改变后会触发render

useRef

同useState,但不触发render

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` 指向已挂载到 DOM 上的文本输入元素
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

通常也被用来这样引用Dom

另外同createRef不同的点是,不会每次render都创建新的

useContext

当前的 context 值由上层组件中距离当前组件最近的 <MyContext.Provider> 的 value prop 决定, context可以被用来做主题切换。

useContext的优先级比祖先的React.memo shouldComponentUpdate

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);

  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}