React的组件发展

函数式组件

function HelloMessage() {
  let message = 'hello message'
  return (
    <div>
      <div>{messgae}</div>
      <button onClick={() => { message = 'hello react' }}>修改文本</button>
    </div>
  )
}

函数式组件的缺陷：

组件不会重新渲染：修改message之后，组件不知道自己要重新渲染
如果组件可以重新渲染，函数会被重新执行，第二次执行时message又会被初始化为"hello message"
没有生命周期的回调

类组件

function HelloWorld (props) {
  const imitateRequest = () => {
    setTimeout(() => {
      console.log('模拟函数式组件发送请求')
    }, 1000)
  }
  imitateRequest()
  return (
    <div>
      <h2>Hello World: {props.counter}</h2>
    </div>
  )
}

class App extends PureComponent {
  constructor (props) {
    super(props)
    this.state = {
      counter: 1
    }
  }
  increment () {
    this.setState({
      counter: this.state.counter + 1
    })
  }
  render() {
    let { counter } = this.state
    return (
      <div>
        <h1>App:{counter}</h1>
        <button onClick={this.increment}>修改counter</button>
        <HelloWorld counter={counter}/>
      </div>
    )
  }
}

class组件相对于函数式组件有什么优势？比较常见的是下面的优势：

class可以定义自己的state，用来保存组件内部的状态
- 而函数式组件不可以，因为函数每次调用，都会产生新的临时变量
class有自己的生命周期，我们可以在对应的生命周期中编写自己的逻辑
- 比如在componentDidMount中发送网络请求，这个生命周期只会执行一次
- 函数式组件，如果在函数中发送网络请求，每次重新渲染都会重新发送一次网络请求
class组件在状态发生变化时，只会重新执行render函数和componentDidupdate等
- 函数式组件在重新渲染时，整个函数都会被执行

class组件的缺点：

复杂组件变得难以理解：
对于逻辑复杂的组件，代码会比较混乱，比如componentDidMount中，就可能包含大量的逻辑代码，比如网络请求，事件监听等。如果想要抽取通用的逻辑，比如高阶组件(HOC)，又增加代码的复杂度。
难以理解的class: 要学习class,还必须搞清楚this的指向
组件复用状态很难：
- 通过高阶组件复用状态
- Provider和Consumer来共享状态，但是多次使用Consumer时，代码就会存在很多嵌套
- 这些代码不管是编写和设计，都比较困难

Hooks的出现

hooks的出现解决函数式组件的问题，可以让我们在函数式组件中使用state以及react的其他特性。

const Home = () => {
  const [name, setName] = useState('hello title')
  const handleName = ({ target: {value}}) => {
    setName(value)
  }
  useEffect(() => {
    document.title = name
  }, [name])

  const [width, setWidth] = useState(window.innerWidth)
  useEffect(() => {
    let handleResize = () => setWidth(window.innerWidth)
    window.addEventListener('resize', handleResize)
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, [])

  return (
    <div>
      <input value={name} onChange={handleName}/>
      <span>{width}</span>
    </div>
  )
}

Hooks的好处：

函数式组件结合hooks让整个代码变得非常简洁
- 利用useEffect，把业务逻辑分开，把之前放在不同生命周期里的相同功能的代码，聚合在一起，把不同功能但是要在同一生命周期的代码，隔离开，提高了代码的可读性和可维护性。
解决了和状态相关的逻辑复用问题：
- 原来代码复用使用的高阶组件和渲染属性都会增加组件树层级，使用起来也不方便，自定义hooks就可以解决这些问题，而且使用更直观方便；
并且再也不用考虑this相关的问题；
更好的体现了react的开发思想，从state->view的函数式映射
- 可以把UI的展示看成一个函数执行的过程，Model就相当于输入的参数，UI就相当于函数的执行结果；react要保证的是每当状态发生变化时，函数就会重新执行，并且会生成新的dom树，然后react会把新的dom树，以最优的方式更新到浏览器上；

Hooks的注意事项：

只能在函数最外层调用hook，不能在循环、条件判断或者子函数中调用
只能在React的函数组件或者自定义Hooks中调用Hook，不能在其他js函数中调用
保证状态最小化，需要渲染到UI里的保存在state里，不需要渲染的可以保存在useRef里；或者一些可以通过其他状态计算得出的数据；
不要用props去初始化state，可以在useEffect中通过监听props的变化去设置state;

有了Hooks以后得函数式组件，依然存在一些问题：

事件处理函数会被重复定义，数据计算过程没有缓存
- 这些问题就需要利用useCallback、useMemo、useRef这些Hook来做一些优化
对一些类组件的生命周期函数还不支持，还不能实现getSnapShotBeforeUpdate和componentDidCatch这个生命周期；

React的组件发展

函数式组件

类组件

Hooks的出现

推荐阅读更多精彩内容