react 函数组件和hook

函数组件

1.函数组件没有生命周期

2.函数组件没有this

3.函数组件通过hook完成各种操作

4.函数组件本身就是render函数

5.props在函数第一个参数解释

useState 参考https://www.cnblogs.com/ssszjh/p/14581014.html

props 参考https://www.cnblogs.com/ssszjh/p/18118746

生命周期 useEffect  相当于监听属性 参考https://www.cnblogs.com/ssszjh/p/18122682

useMemo相当于计算属性，可以缓存变量

1.不传第二个参数相当于初始化和更新的时候都会执行, componentDidMount 和 componentDidUpdate

2.第二个参数[],里面没有值表示只在初始化时执行一次相当于componentDidMount

3.第二个参数有值表示只有当arr变化时，才去再次执行

useCallbac缓存方法

useEffect useMemo useCallbac第二个参数都是一样的

useRef和useContext 参考https://www.cnblogs.com/ssszjh/p/18122747

 

import styles from './index.less';
import { Button } from 'antd';
import React, { useCallback, useMemo, useState } from 'react';
const HomePage: React.FC = () => {
  let [arr, setArr] = useState([1, 2, 3])
  let [str, setStr] = useState('sqweqwe')
  // <div>1.不传第二个参数相当于初始化和更新的时候都会执行, componentDidMount 和 componentDidUpdate</div>
  // <div>2.第二个参数[],里面没有值表示只在初始化时执行一次相当于componentDidMount</div>
  // <div>3.第二个参数有值表示只有当arr变化时，我们才去再次执行</div> 
  let all = useMemo(() => {
    console.log(1)
    let _all = 0
    arr.forEach(item => {
      _all += item
    })
    return _all
  }, [arr])
  let changeMes = useCallback(() => {
    setStr(str + '1')
  }, [])
  function changeArr() {
    let newArr = [...arr]
    newArr.push(1)
    setArr(newArr)
  }
  return (
    <div className={styles.container}>
      <h2>函数组件和hook</h2>
      <h3>函数组件</h3>
      <div>1.函数组件没有生命周期</div>
      <div>2.函数组件没有this</div>
      <div>3.函数组件通过hook完成各种操作</div>
      <div>4.函数组件本身就是render函数</div>
      <div>5.props在函数第一个参数解释</div>
      <div>useState 参考test3</div>
      <div>props 参考test5</div>
      <div>生命周期 useEffect 参考test6 相当于监听属性</div>
      <div>useMemo相当于计算属性</div>
      <div>1.不传第二个参数相当于初始化和更新的时候都会执行, componentDidMount 和 componentDidUpdate</div>
      <div>2.第二个参数[],里面没有值表示只在初始化时执行一次相当于componentDidMount</div>
      <div>3.第二个参数有值表示只有当arr变化时，我们才去再次执行</div>
      <div>减少子组件的更新</div>
      <div>{str}</div>
      <Button type="primary" size="small" onClick={changeMes}>修改字符串数据</Button>
      <br></br>
      <Button type="primary" size="small" onClick={changeArr}>修改数组数据</Button>
      <div>{all}</div>
      <div>useCallbac缓存方法</div>
      <div>useEffect useMemo useCallbac第二个参数都是一样的</div>
      <div>useRef和useContext 参考test7</div>
    </div>
  );
};



export default HomePage;