78. 函数组件

78. 函数组件

函数组件比class组件简单

创建方式

函数组件

创建函数组件的三种方式

//1
const Hello = (props) => {
	return <div>{props.message}</div>
}
//2
const Hello = props => <div>{props.message}</div>
//上面的缩写形式，如果箭头后面加了{}就必须有return

//3
function Hello(props){
	return <div>{props.message}</div>
}

函数组件代替class组件

面临两个问题

函数组件没有state

函数组件没有生命周期

没有State

React v16.8.0 推出Hooks API

其中一个API叫做useState可以解决问题

import React, {useState} from 'react';
export default function App() {
  const [n, setN] = useState(0);

  const onClick = ()=>{
    setN(n+1)
  }
  return (
    <div className="App">
      {n}
      <button onClick={onClick}>+1</button>
    </div>
  );
}

没有生命周期

React v16.8.0推出Hooks API

其中的一个API叫做useEffect可以解决问题

UseEffect

模拟componentDidMount

useEffect(()=>{console.log('第一次渲染')},[])
//第二个参数指明在何时调用 ，传入空数组代表只在第一次渲染时调用

模拟componentDidUpdate

useEffect(()=>{console.log('任意属性变更')})
//任何state变化都要执行这个函数
useEffect(()=>{console.log('n变了')},[n])
//n变了就执行这个函数

模拟componentWillUnmount

useEffect(()=>{
	console.log('第一次渲染')
	return ()=>{
		console.log('组件要死了')
	}
})
//return之后是函数销毁时执行

其他生命周期怎么模拟

constructor

函数组件要执行的时候，就相当于constructor，return之前的内容

函数名就是标签名

shouldComponentUpdate

后面的React.memo和useMemo可以解决

render

函数组件的返回值就是render的返回值

总结

能用函数组件就用函数组件，因为它更简单

如果你理解不了函数组件，就用class组件

插曲

useUpdate

第一次由undefined变成0时不执行函数

第二次变化时，执行函数

第三次变化时，执行函数

这就是自定义Hook

useState的原理

函数组件模拟生命周期

自定义Hook之useUpdate

const useUpdate = (fn, dep) => {
	const [count, setCount] = useState(0);
	useEffect(()=>{
		setCount(x => x + 1);
	},[dep]);
	
	useEffect(() => {
		if(count > 1){
			fn();
		}
	}, [count, fn]);
};

export default useUpdate