REACT HOOK的一点总结

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;
})

4. 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