UseState () method

Data-driven UI

Introduction method:

import React,{useState}from 'react'
Copy the code

Declaration method:

  1. Function component
Must be written at the top of the function componentconst [state,setState] =useState(data);
// The initial value of data can be a Boolean value, a number, an empty array, or passed in from outside
// State is the first parameter in useState(), which drives the UI's data
//setState A function that changes state data. Calling this function rerenders the component. The first value returned by the rerendered component useState will always be the updated state.
Copy the code
  1. Class components
    class App extends React Component {
       construcor(props){
         super(props);
         this.state = {
           count: 0
         };
       }
       
       render() {
         return(
            <div>
              <p>{this.state.count}</p>
              <button onclick{() = > this.setState({count:this.state.count})}>+1</button>
            </div>)}}Copy the code

UI changes cannot be driven by changes to the raw data, only changes to the data in state can change the UI state, only changes to the set method. If the update function returns the same value as the current state, subsequent rerendering will be skipped entirely.

Const [TAB,setTab] = useState(data); function Nav() {const [TAB,setTab] = useState(data); Function () {// Change TAB state (state) to 'newtab' and rerender setTab(newtab); }}Copy the code
var data = [1.2.3]

function Nav() {
  const [tab,setTab] = useState(data);
  
  const change = () = > {
  var arr=data.map(item= >{
    return item*2
   })
  }
  setTab(arr); //[2，4，6]
}
Copy the code

React passes parameters to child components:

1. The first one

const data = {
  btn:"Switch"} the parent componentfunction Father(){
const [tab,setTab] = useState(data)
    
  return(
    <link {. data} change={setTab}/>  // Pass each item of the data object and the setTab method to the Link component} child componentexport default function Link(props){
  function cb() {
  	props.change(newData);// Call setTab to change data to newData
  }
  return(
    <div onclick={()= >cb()}>{props.btn}</div>)}Copy the code

2. The second

{data.map(item= > <link {. item} setTab={setTab} />)}
  
  export default function Link(props){
const [setTab,name] = props
    //name is the data in data
  function cb() { setTab(newData); }}Copy the code

UseEffect grammar

Import React, {useEffect} from 'React ';Copy the code

UseEffect () is used when a page is rendered for the first time. If the second parameter of useEffect has not changed, it will not be executed again. UseEffect is delayed until the browser has finished rendering the screen.

Grammar useEffect (() = > {/ /... Code that you want to execute only once on the component, so useEffect takes a second argument to an empty array},[])Copy the code

If you don’t wrap the function with useEffect, useState will re-render the component and repeat the code when changing the data with setState. Using useEffect and setting the second argument to an empty array is bound to execute once on the first render and not repeat

UseEffect takes two parameters: the first is the code to execute and the second is an array specifying a set of dependent variables. This effect is re-executed when any of the variables changes.

    function Module(props) {
        useEffect(() = >{
            console.log(props.name)
        },[props.name]);
        return <div>Hello,{props.name}</div>
    }
Copy the code