React入門useState,useRef,useContent等API講解

useState

---

語法:
const [n, setN] = React.useState(0);

0是n的默認值,setN是操做n的函數

setN:

1. 咱們覺得setN會改變n,可是事實每每出乎意料,n並不會變,他是將改變後的數據存到一個數據裏面(具體在哪裏咱們先定爲x),而不是直接賦值去改變n
2. setN必定會觸發組件的從新渲染

useState:

1. useState確定會從x那裏,讀取到n的最新值

x:

1. 每一個組件都有本身的x,這個x咱們命名爲state

useRef

---

語法:

const nRef = React.useRef(0);
nRef.current(表示當前的值)

nRef.current:

1. 當值改變了不會從新render

useContext

---

const themeContext = React.createContext(null);

function App() {
  const [theme, setTheme] = React.useState("red");
  return (
    // themeContext.Provider 建立一個局部做用域
    // 其中裏面的全部組件均可以使用setTheme這個函數
    <themeContext.Provider value={{ theme, setTheme }}>
      <div className={`App ${theme}`}>
        <p>{theme}</p>
        <div>
          <ChildA />
        </div>
        <div>
          <ChildB />
        </div>
      </div>
    </themeContext.Provider>
  );
}

function ChildA() {
  // ChildA這個子組件內部想使用父組件setTheme函數的方式
  const { setTheme } = React.useContext(themeContext);
  return (
    <div>
      <button onClick={() => setTheme("red")}>red</button>
    </div>
  );
}