1, Function components have no this object and no life cycle. hooks are only available after 16.8, that is, function components are added later,

Its principle is to extract and implement the render method of class components

Function components and hooks

1..useState -- define a state data. Why is useState a function in the second parameter? Because react is a one-way data flow, updating state data requires calling methods, so the second parameter is a function to update data. Is the second parameter asynchronous? It must be asynchronous, so how to solve it can be solved by using Promise, setTimeout and requestAnimationFrame

b.useEffect -- side effect monitoring dependency to implement the watch attribute similar to vue,

If the dependency changes, the callback will be executed (it cannot be written as an endless loop here)

If there is no dependency, changes in props and state data will cause execution. If the dependency is an empty array:

The first callback parameter is equivalent to the componentDidMount life cycle. If a function CB is returned in the function, the CB function is equivalent to the componentWillUnmount life cycle

//A method of defining data and updating data using deconstruction assignment
const [salaryList,setSalaryList] = useState([])

//There is a hook function similar to the life cycle of a class component -- There is a null dependent side effect hook function
//useEffect(async function() { //The side effect callback function must not be an asynchronous method, that is, async + await cannot be used here
useEffect(function(){
 //This is the callback function used to execute the side effect business method
  getList().then(list =>{
   setSalaryList(list)
})
  //Define a resize Event, because you need to log off when unloading components resize The second parameter of the event
  function resizeEvt(){
   console.log('-------- resize event')
}
  window.addEventListener('resize',resizeEvt)
//If a function is returned in the side effect hook function, this function can be used as the unloading life cycle componentWillUnmount 
  return function(){
  console.log('-------- componentWillUnmount')
  window.removeEventListener('resize',resizeEvt)
}
},[])

2.useMemo: in react, there is a useMemo hook function, which is consistent with vue's calculated function. It is used to monitor dependency changes, calculate a result and cache the result

The first one is the calculation function, which must return the calculation result

The second is to calculate the dependency. When the dependency changes, the callback will be executed to recalculate the result value and update the cache

const totalAmount=useMemo(function(){
  return salaryList.reduce((res,it)=>{
   if(!!it.amount) res += it.amount
    return res
},0) //The default initial value is 0
},[salaryList])  // Dependency calculation object variable

3.useCallback():

Because the function named function will be defined repeatedly, the current component and this method will be defined twice, so it will occupy two copies in memory

Define a callback function and cache the callback function. When the data changes, the callback function will be updated instead of redefined, which can reduce the memory consumption

There are two parameters: (... Args: []) = > any, which defines the callback function, indicating that the callback function can receive many parameters

deps:React.DependencyList is a required parameter, which is dependent on the DependencyList callback function

In order to optimize memory, the method should be defined as a function object, which can then be cached in memory -- so you can use the useCallback hook function to define the callback function

Therefore, the salaryList in the current callback method is an empty array. If you want to have a value, you should update the callback function after assignment or when the salaryList data changes

//Traverse the data and compare id，If id If equal, it means the tax rate of this data is modified
const calcFunc = useCallback(function(id){
let _list = salaryList.reduce((res,it)=>{
 if(it.id=== id){
   it.rate = Math.ceil(Math.random() *  42 + 3 ) / 100
   it.amount=it.base + it.jx - it.rateAmount
}
  res.push(it)
  return res
},[])
setSalaryList(_list)

//When the array changes, you need to observe. When the data has value, you need to calculate the tax rate and paid salary -- 
//This is the same as using the watch + deep deep listening attribute in vue

//watch:{
// salaryList:{
//   deept:true,
//    handler:function(_list){}
}
//}

//stay react How to implement in -- When salaryList After the change, it will cause some side effects
},[salaryList])