函数组件相对简单，注意函数组件没有生命周期，但可以模拟生命周期

函数组件

  1. 基本写法
1
2
3

const App = ()=>{
	return <div>app</div>
}
  1. 使用函数组件写一个加1
1
2
3
4
5
6
7
8
9

const App = props => {
  const [n, setN] = React.useState(0)
  const onClick = () => {
    setN(n + 1)
  }
  return (
    <div><button onClick={onClick}>+1</button>{n}</div>
  )
}
  1. 函数组件Tips
  • 函数组件没有state,要使用React.useState
  • 没有生命周期

函数组件模拟生命周期

  1. 使用useEffect解决生命周期问题
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

useEffeect(()=>{},[])
// 空数组代表只在第一次渲染调用，即componentDidMount
useEffect(()=>{
	console.log('n变了')
},[n])
// n变得时候调用(但是第一次渲染也调用了)，即componentDidUpdate

useEffect(()=>{
	console.log('n变了')
})
// 不写n 所有state变得时候都会变

useEffect(()=>{
	console.log('更新了')
	return ()=>{console.log('销毁了')}
})
// return一个函数代表销毁 即componentWillUmount
  1. 模拟Update除去第一次渲染,自定义React Hooks
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

const [nUpdateCount,setNUpdcateCount] = React.useState(0)
useEffect(()=>{
	setNUpdateCount(x=>x+1)
},[n])
useEffect(()=>{
	if(nUpdateCount>1){
		console.log('n变了')
	}
},[nUpdateCount])

// 更强的写法
const useUpdate = (fn,dep)=>{
	const [count,setCount] = React.useState(0)
	useEffect(()=>{
		setCount(x=>x+1)
	},[dep])
	useEffect(()=>{
		if(Count>1){
			fn()
		}
	},[count,fn])
}

const App = ()=>{
	useUpdate(()=>{console.log('n变了')},n)
}
// 此时就可以在全局使用useUpdate，甚至可以从别的引入useUpdate