hook 诞生前的问题
1. 组件内逻辑复杂
有状态的组件，当业务复杂时组件间的共享状态变得频繁和复杂，使之难以维护
Mixins Considered Harmful
所以 我们引用redux来管理状态，但同时也会引发其他问题，如 数据不一致等
2.性能问题
class的方式需要编译大量冗余代码，而且压缩效果不是很好（这个没有具体实际操练对比过）
3. react的嵌套地狱
image.png
这些问题是如何解决
redux
renderProps gitHub地址
但是2 3 没了解到好的解决办法
HOOK的出现带来了什么呢
官方API
image.png
1. 之前我们最常见的写法
class MyCard extends React.Component {
constructor(props){
super(props);
this.state={
name:'Niko'
};
this.handleNameChange = this.handleNameChange.bind(this);
}
handleNameChange(e){
this.setState({name:e.target.name})
}
render(){
return (
<div>
<input
type="text"
value={this.state.name}
onChange={this.handleNameChange}
/>
</div>
)
}
}
2. 使用hook 之后的写法
function MyCard(){
const [name,setName] = userState('Niko')
return (
<div>
<input
type="text"
value={name}
onChange={setName(e.target.value)}
/>
</div>
)
}
3. initialState 惰性初始值
如果只想在第一次渲染中起作用，hook传入一个函数，那么这个函数只会在初始渲染时被调用
const [state, setState] = useState(() => {
const initialState = extractInterviewStateFromInterviewGroup(props);
return initialState;
})
- etc 还有很多 官方给出的 + 贴心的自定义HOOK
据说，函数式编程是react的精髓～～
还有哪些hook未曾解决
" With hooks, we separate code not based on the lifecycle method name but based on what the code is doing " -- Dan Abramov
