React Hooks --- useState 和 useEffect

　　First thing to say is that React Hooks are functions, using React Hooks, it is to call a function, but different Hooks (function) have different functions only. Second, React Hooks can only be used in the assembly function, the function is a function of the components, what role is the function? It is called and executed. React When calling a function render components, each line of code inside the component function will be executed one by one Hooks will be followed by the implementation.

　　useState () call returns an array of state of the component is the first item in the array, the second term is a function of status update, so the function component can declare a variable to hold the state of the state, and a reference variable save changes function of the state, the state has so far function components, and can also update the status. Of course, useState () also accepts a parameter used to initialize the state variables, this parameter may be any type, base type object function. You can use the array index way to get to the state variables and update functions, which helps to understand

function App() {
    let state = useState('')[0];
    let setState = useState('')[1];
}

　　More concise syntax is to use an array of deconstruction, but a meaningful name for the state variables and update functions

const App= () => {
  const [message, setMessage]= useState( '' );
}

　　After declaring a variable, you can use the same as the other variables in the function component, more specific, is used in jsx function returned. Write a input input box

const App = () => {
  const [message, setMessage]= useState( '' );

  function handleClick(e) {
      setMessage(e.target.value)
  }

  return (
    <input value={message} onChange={handleClick}></input>
  )
}

　　When the first rendering component, first call useState (), this time useState () returns '', as we pass its initial value is '', and then assign it to the message, this time the message is '', then declare a function handleClick, and finally return to a jsx, which it uses message, assigned value, the value of value at this time is also to '', while the binding of a change event. Rendering is complete, there is shown an input page input box is empty. Now enter a value, triggering the onChange event, it calls setMessage, then it triggers the update mechanism of React. Of course React not immediately update this value, it will put the update queue, and the same class components setState, React rendering is asynchronous. When re-rendering real time, React will call again and rendering App function components, or to call useState (), then useState not return the initial value, but the trigger values ​​in the updated setMessage. Because when you call setMessage, we pass a parameter equivalent to React, React completed within a status update. UseState the value returned is the value you enter in the input box, assigned to the message. Then execute down, or create a function, then jsx in, jsx the message is the value you entered, and then assigned to value, rendering is complete, input on the page with the values ​​you entered.