文档
学习，并尝试重构一些项目
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
28
29
30
31
32
33
34
|
class Example extends React.Component{
constructor(props){
super(props)
this.state = {
count:0
}
}
render(){
return(
<div>
<p>You click {this.state.count} times</p>
<button onClick={()=>this.setState({count:this.state.count+1})}>
Click me
</button>
</div>
)
}
}
// hook示例
import React,{useState} from 'react'
function Example(){
// 1. 函数组件中没有this,不能分配或者读取this.state,直接调用 useState
// 2. useState定义了一个 state变量。需要为一个参数初始state，参数可以是数字字符串或者对象。返回值为当前state以及更新state的函数。
const [count,setCount] = useState(0)
return(
<div>
<p>You click {count} times</p>
<button onClick={()=>setCount(count+1)}></button>
</div>
)
}
|
1
2
3
4
5
6
7
8
|
const Example = (props)=>{
return <div />
}
function Example(props){
// 这里可以使用 Hook
return <div />
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
import React,{useState,useEffect} from 'react'
function Example(){
const [count,setCount] = useState(0);
useEffect(()=>{
document.title = `You click ${count} times`
})
return(
<div>
<p>You click {count} times</p>
<button onClick={()=>setCount(count+1)}>
Click me
</button>
</div>
)
}
// 1. useEffect 告诉React 组件需要在渲染后执行某些操作。会保存传递的函数，并且在执行 DOM更新之后调用它。在这个 effect 中，我们设置了 document 的 title 属性，不过我们也可以执行数据获取或者调用其他命令的 API
// 2. 将 useEffect 放在组件内部让我们可以在 effect 中直接访问 count state 变量或者其他 props.我们不需要特殊的API来读取它，它已经保存在函数作用域中。Hook 使用了 js的闭包机制，而不用在js已经提供了解决方案的情况下，还引入特定的React API
// 3. useEffect会在每次渲染后都执行，默认情况下，它在第一次渲染之后和每次更新之后都会执行，不用去考虑挂载还是更新，React保证了每次运行 effect的同时，DOM都已经更新完毕了
|
eslint-plugin-react-hooks
中的
exhaustive-deps
规则。此规则会在添加错误依赖时发出警告并给出修复建议。
linter 插件
来强制执行这些规则：
eslint-plugin-react-hooks
的 ESLint 插件来强制执行这两条规则。如果你想尝试一下，可以将此插件添加到你的项目中：
1
|
npm install eslint-plugins-react-hooks --save-dev
|
1
2
3
4
5
6
7
8
9
10
11
12
|
// ESLint 的配置
{
"plugins":[
//...
"react-hooks"
],
"rules":{
//...
"react-hooks/rules-of-hooks":"error",// 检查 Hook 规则
"react-hooks/exhaustive-deps":"warn" // 检查 effect 的依赖
}
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
function FriendStatus(props){
const isOnline = useFriendStatus(props.friend.id)
if(isOnline === null){
return 'Loading...'
}
return isOnline ? 'Online' : 'Offline'
}
function FriendListItem(props){
const isOnline = useFriendStatus(props.friend.id)
return(
<li style={{color:isOnline?'green':'black'}}>
{props.friend.name}
</li>
)
}
|
1
|
const [state,setState] = useState(initialState)
|
1
|
const value = useContext(myContext);
|
1
|
const [state,dispatch] = useReducer(reducer,initialArg,init)
|
1
2
3
4
5
6
|
const memoziedCallback = useCallBack(
()=>{
dosomething(a,b);
},
[a,b]
)
|
1
|
const memoizedValue = useMemo(()=>computeExpensiveValue(a,b),[a,b])
|
1
|
const refContainer = useRef(initialValue)
|
1
|
useImperativeHandle(ref,createHandle,[deps])
|
