乐趣区

关于react.js:React组件复用的发展史

作者：

jiezi

在

Mixins

React Mixin通过将共享的办法包装成Mixins办法，而后注入各个组件来实现，官网曾经不举荐应用，但依然能够学习一下，理解为什么被遗弃。

React MiXin只能通过React.createClass()来应用，如下：

const mixinDefaultProps = {}
const ExampleComponent = React.createClasss({
  mixins: [mixinDefaultProps],
  render: function(){}
})

Mixins实现

import React from 'react'

var createReactClass = require('create-react-class')

const mixins = {
  onMouseMove: function(e){
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
}

const Mouse = createReactClass({
  mixins: [mixins],
  getInitialState: function() {
    return {
      x: 0,
      y: 0
    }
  },
  render() {
    return (<div onMouseMove={this.onMouseMove} style={{height: '300px'}}>
      <p>the current mouse position is ({this.state.x},{this.state.y})</p>
    </div>)
  }
})

Mixins问题

  • Mixins引入了隐式的依赖关系

你可能会写一个有状态的组件，而后你的共事可能增加一个读取这个组件state的mixin。几个月之后，你可能心愿将该state挪动到父组件，以便与其兄弟组件共享。你会记得更新这个mixin来读取props而不是state吗？如果此时，其它组件也在应用这个mixin呢？

  • Mixins引起名称抵触

无奈保障两个特定的mixin能够一起应用。例如，如果FluxListenerMixin和WindowSizeMixin都定义来handleChange()，则不能一起应用它们。同时，你也无奈在本人的组件上定义具备此名称的办法。

  • Mixins导致滚雪球式的复杂性

每一个新的需要都使得mixins更难了解。随着工夫的推移，应用雷同mixin的组件变得越来越多。任何mixin的新性能都被增加到应用该mixin的所有组件。没有方法拆分mixin的“更简略”的局部，除非或者引入更多依赖性和间接性。逐步，封装的边界被侵蚀，因为很难扭转或者删除现有的mixins，它们一直变得更形象，直到没有人理解它们如何工作。

相干React实战视频解说：进入学习

高阶组件

高阶组件（HOC）是React中复用组件逻辑的一种高级技巧。HOC本身不是React API的一部分，它是一种基于React的组合个性而造成的设计模式。

高阶组件是参数为组件，返回值为新组件的函数

组件是将props转换为UI，而高阶组件是将组件转换为另一个组件。

const EnhancedComponent = higherOrderComponent(WrappedComponent)

HOC的实现

  • Props Proxy: HOC对传给WrappedComponent的props进行操作
  • Inheritance Inversion HOC继承WrappedComponent，官网不举荐

Props Proxy

import React from 'react'

class Mouse extends React.Component {
  render() {
    const { x, y } = this.props.mouse 
    return (
      <p>The current mouse position is ({x}, {y})</p>
    )
  }
}

class Cat extends React.Component {
  render() {
    const { x, y } = this.props.mouse 
    return (<div style={{position: 'absolute', left: x, top: y, backgroundColor: 'yellow',}}>i am a cat</div>)
  }
}

const MouseHoc = (MouseComponent) => {
  return class extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        x: 0,
        y: 0
      }
    }
    onMouseMove = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY
      })
    }
    render() {
      return (
        <div style={{height: '300px'}} onMouseMove={this.onMouseMove}>
          <MouseComponent mouse={this.state}/>
        </div>
      )

    }
  }
}

const WithCat = MouseHoc(Cat)
const WithMouse = MouseHoc(Mouse)

const MouseTracker = () => {
    return (
      <div>
        <WithCat/>
        <WithMouse/>
      </div>
    )
}

export default MouseTracker

请留神：HOC不会批改传入的组件，也不会应用继承来复制其行为。相同，HOC通过将组件包装在容器组件中来组成新组件。HOC是纯函数，没有副作用。

在Props Proxy模式下，咱们能够做什么？

  • 操作Props

在HOC外面能够对props进行增删改查操作，如下：

  const MouseHoc = (MouseComponent, props) => {
    props.text = props.text + '--I can operate props'
   return class extends React.Component {
      render() {
        return (
          <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
            <MouseComponent {...props} mouse={this.state} />
          </div>
        )
      }
  }

  MouseHoc(Mouse, {
    text: 'some thing...'
  })
  • 通过Refs拜访组件
  const MouseHoc = (MouseComponent) => {
    return class extends React.Component {
      ...
      render() {
        const props = { ...this.props, mouse: this.state }
        return (
          <div style={{height: '300px'}} onMouseMove={this.onMouseMove}>
            <MouseComponent {...props}/>
          </div>
        )
      }
    }
  }

  class Mouse extends React.Component {
    componentDidMounted() {
      this.props.onRef(this)
    }
    render() {
      const { x, y } = this.props.mouse 
      return (
        <p>The current mouse position is ({x}, {y})</p>
      )
    }
  }

  const WithMouse = MouseHoc(Mouse)

  class MouseTracker extends React.Component {
    onRef(WrappedComponent) {
      console.log(WrappedComponent)// Mouse Instance
    }
    render() {
      return (
        <div style={{ height: '100%' }} onMouseMove={this.handleMouseMove}>
          <WithMouse mouse={this.state} ref={this.onRef}/>
        </div>
      )
    }
  }
  • 提取state
  <MouseComponent mouse={this.state}/>
  • 包裹WrappedComponent
  <div style={{height: '300px'}} onMouseMove={this.onMouseMove}>
    <MouseComponent {...props}/>
  </div>

Inheritance Inversion

该模式比拟少见，一个简略的例子如下：

  function iiHOC(WrappedComponent) {
    return class WithHoc extends WrappedComponent {
      render() {
        return super.render()
      }
    }
  }

Inheritance Inversion容许HOC通过this拜访到WrappedComponent，意味着它能够拜访到state、props、组件生命周期办法和render办法，HOC能够增删改查WrappedComponent实例的state，这会导致state关系凌乱，容易呈现bug。要限度HOC读取或者增加state，增加state时应该放在独自的命名空间里，而不是和WrappedComponent的state一起

class Mouse extends React.Component {
  render(props) {
    const { x, y } = props
    return (
      <p>The current mouse position is ({x}, {y})</p>
    )
  }
}

const MouseHoc = (MouseComponent) => {
  return class extends MouseComponent {
    constructor(props) {
      super(props)
      this.state = {
        x: 0,
        y: 0
      }
    }
    onMouseMove = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY
      })
    }
    render() {
      const props = { mouse: this.state }
      return (
        <div style={{height: '300px'}} onMouseMove={this.onMouseMove}>
          {super.render(props)}
        </div>
      )
    }
  }
}

const WithMouse = MouseHoc(Mouse)

HOC约定

  • 将不相干的props传递给被包裹组件

HOC为组件增加个性。本身不应该大幅扭转约定。HOC返回的组件与原组件应放弃相似的接口。

HOC应该透传与本身无关的props。大多数HOC都应该蕴含一个相似于上面的render办法:

  render() {
    // 过滤掉专用于这个高阶组件的 props 属性，且不要进行透传
    const { extraProp, ...passThroughProps } = this.props

    // 将 props 注入到被包裹的组件中
    // 通常为 state 的值或者实例办法
    const injectedProp = someStateOrInstanceMethod

    // 将 props 传递给被包装组件
    return (
      <WrappedComponent
        injectedProp = {injectedProp}
        {...passThroughProps}      />
    )

  }

这中约定保障来HOC的灵活性以及可复用性。

  • 最大化可组合性

并不是所有的HOC都一样，有时候它仅承受一个参数，也就是被包裹的组件：

  const NavbarWithRouter = withRouter(Navbar)

HOC通常能够接管多个参数。比方在Relay中，HOC额定接管来一个配置对象用于指定组件数据依赖：

  const CommentWithRelay = Relay.createContainer(Comment, config)

最常见的HOC签名如下：

// React Redux的`connect`函数
const ConnectedComment = connect(commentSelector, commentActions)(CommentList)

// 拆开来看
// connnect是一个函数，它的返回值为另外一个函数
const enhance = connect(commentListSelector, commentListActions)
// 返回值为 HOC， 它会返回曾经连贯 Redux store的组件
const ConnectedComment = enhance(CommentList)

换句话说，connect是一个返回高阶组件的高阶函数。

这种模式可能看起来令人困惑或者不必要，然而它有一个有用的属性。像connect函数返回的单参数HOC具备签名Component => Component。输入类型与输出类型雷同的函数很容易组合在一起。

// 而不是这样
const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent))

// 你能够编写组合工具函数
const enhance = compose(withRouter, connect(commentSelector))
const EnhancedComponent = enhance(WrappedComponent)
  • 包装显示名称以便轻松调试

HOC创立的容器组件与任何其余组件一样，会显示在React Developer Tools中。为了不便调试，请抉择一个显示名称，已表明是HOC的产品。

比方高阶组件名为withSubscription，被包装组件的显示名称为CommentList，显示名称应该为WithSubscription(CommentList)

  function withSubscription(WrappedComponent) {
    class WithSubscription extends React.Component {/*....*/}
    WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`
    return WithSubscription
  }

  function getDisplayName(WrappedComponent) {
    return WrappedComponent.displayName || WrappedComponent.name || 'Component'
  }

注意事项

  • 不要在render办法中应用HOC
  render() {
    // 每次调用 render 函数都会创立一个新的 EnhancedComponent
    // EnhancedComponent1 !== EnhancedComponent2
    const EnhancedComponent = enhance(MyComponent)
    // 这将导致子树每次渲染都会进行卸载，和从新挂载的操作
    return <EnhancedComponent/>
  }
  • 务必复制静态方法

当你将HOC利用于组件时，原始组件将应用容器组件进行包装，这意味着新组件没有原始组件的任何静态方法。

  // 定义静态方法
  WrappedComponent.staticMethod = function(){/*...*/}
  // 当初应用 HOC
  const EnhancedComponent = enhance(WrappedComponent)

  // 加强组件没有 staticMethod
  typeof EnhancedComponent.staticMethod === 'undefined' // true

为了解决这个问题，你能够在返回之前把这些办法拷贝到容器组件上：

  function enhance(WrappedComponent) {
    class Enhance extends React.Component {/*...*/}
    // 必须精确晓得应该拷贝哪些办法
    Enhance.staticMethod = WrappedComponent.staticMethod
    return Enhance
  }

然而这样做，你须要晓得哪些办法应该被拷贝，你能够应用hoist-non-react-statics主动拷贝所有React静态方法：

  import hoistNonReactStatic from 'hoist-non-react-statics'
  function enhance(WrappedComponent) {
    class Enhance extends React.Component {/*..*/}
    hoistNonReactStatic(Enhance, WrappedComponent)
    return Enhance
  }

除了导出组件，另一个可行的计划是再额定导出这个静态方法

  MyComponent.someFunction = someFunction
  export default MyComponent

  // ...独自导出该办法
  export { someFunction }

  // ...并在要应用的组件中，import它们
  import MyComponent, { someFunction } form './Mycomponent.js'
  • Refs不会被传递

尽管高阶组件约定是将所有props传递给被包装组件，但对于refs并不实用。因为ref实际上并不是一个prop，就像key一样，它是由React专门解决的。如果将ref增加到HOC的返回组件中，则ref援用指向容器组件，而不是被包装组件。

Render Props

“render prop”是指一种React组件之间应用一个值为函数的prop共享代码的简略技术。

具备 render prop 的组件承受一个函数，该函数返回一个React元素并调用它而不是实现本人的渲染逻辑

  <DataProvider render={data => (
    <h1>Hello {data.target}</h1>
  )}/>

Render Props 实现

render props是一个用于告知组件须要渲染什么内容的函数prop

class Cat extends React.Component {
  render() {
    const { x, y } = this.props.mouse 
    return (<div style={{position: 'absolute', left: x, top: y, backgroundColor: 'yellow',}}>i am a cat</div>)
  }
}

class Mouse extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      x: 0,
      y: 0
    }
  }
  onMouseMove = (e) => {
    this.setState({
      x: e.clientX,
      y: e.clientY
    })
  }
  render() {
    return (
      <div style={{height: '300px'}} onMouseMove={this.onMouseMove}>
        {this.props.render(this.state)}
      </div>
    )
  }
}

export default class MouseTracker extends React.Component {
  render() {
    return (
      <div>
        <Mouse render={mouse => {
          return <Cat mouse={mouse}/>
        }}/>
      </div>
    )
  }
}

乏味的是，你能够应用带有 render prop的惯例组件来实现大多数高阶组件HOC。

留神：你不肯定要用名为 render的prop来应用这种模式。事实上，任何被用于告知组件须要渲染什么内容的函数prop在技术上都能够被称为“render prop”。

只管之前的例子应用来render，咱们能够简略地应用children prop!

<Mouse children={mouse => (
  <p>鼠标的地位 {mouse.x}, {mouse.y}</p>
)}/>

记住，children prop并不真正须要增加到JSX元素的“attributes”列表中。你能够间接放在元素外部！

<Mouse>
 {mouse => (
  <p>鼠标的地位 {mouse.x}, {mouse.y}</p>
  )}
</Mouse>

因为这一技术的特殊性，当你在波及一个相似的API时，倡议在你的propTypes里申明children的类型应为一个函数。

  Mouse.propTypes = {
    children: PropTypes.func.isRequired
  }

将Render props与React.PureComponent一起应用时要小心

  class Mouse extends React.PureComponent {
    // ...
  }

  class MouseTracker extends React.Component {
    render() {
      return (
        <div>
          {
            // 这是不好的！每个渲染的`render`prop的值将会是不同的
          }
          <Mouse render={mouse => {
            <Cat mouse={mouse}/>
          }}/>
        </div>
      )
    }
  }

在上述例子中，每次<MouseTracker>渲染，它会生成一个新的函数作为<Mouse render>的prop， 所以同时对消了继承自React.PureComponent的<Mouse>组件的成果。

能够定义一个prop作为实例办法：

  class MouseTracker extends React.Component {
    renderTheCat(mouse) {
      return <Cat mouse={mouse}/>
    }
    render() {
      return (
        <div>
          <Mouse render={this.renderTheCat}/>
        </div>
      )
    }
  }

高阶组件和render props 问题

  • 很难复用逻辑,会导致组件树层级很深

如果应用HOC或者render props计划来实现组件之间复用状态逻辑，会很容易造成“嵌套天堂”。

  • 业务逻辑扩散在组件的各个办法中
class FriendStatusWithCounter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0, isOnline: null };
    this.handleStatusChange = this.handleStatusChange.bind(this);
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
    ChatAPI.subscribeToFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentWillUnmount() {
    ChatAPI.unsubscribeFromFriendStatus(
      this.props.friend.id,
      this.handleStatusChange
    );
  }

  handleStatusChange(status) {
    this.setState({
      isOnline: status.isOnline
    });
  }

随着利用性能的扩充，组件也会变简单，逐步会被状态逻辑和副作用充斥。每个生命周期经常蕴含一些不相干的逻辑。比方下面代码，设置 document.title 的逻辑被宰割到 componentDidMount 和 componentDidUpdate 中的，订阅逻辑又被宰割到 componentDidMount 和 componentWillUnmount 中的。而且 componentDidMount 中同时蕴含了两个不同性能的代码。

  • 难以了解的class

须要学习class语法，还要了解Javascript中this的工作形式，这与其它语言存在微小差别。还不能遗记绑定事件处理。对于函数组合和class组件的差别也存在一致，甚至还要辨别两种组件的应用场景。应用class组件会无心中激励开发者应用一些让优化措施有效的计划。class也给目前的工具带来问题，比方，class不能很好的压缩，并且会使热重载呈现不稳固的状况。

Hooks

Hook是React 16.8点新增个性，它能够让你在不编写class的状况下应用state以及其它的React个性。

Hooks实现

应用State Hoook

import React, { useState } from 'react'

function Example() {
  const [count, setCount] = useState(0)
  return (
    <div>
      <p>you clicked {count} times</p>
      <button onClick={() => setCount(count+1)}>        Click me      </button>
    </div>
  )
}

申明多个state变量

function ExampleWithManyStates() {
  // 申明多个 state 变量
  const [age, setAge] = useState(42)
  const [fruit, setFruit] = useState('banana')
  const [todos, setTodos] = useState([{text: 'Learn Hooks'}])
}

调用 useState 办法的时候做了什么？

它定义了一个“state变量”。咱们能够叫他任何名称，与class外面的this.state提供的性能完全相同。

useState 须要哪些参数？

useState()办法外面惟一的参数就是初始state，能够应用数字或字符串，而不肯定是对象。

useState 办法的返回值是什么？

返回值为：以后state以及更新state的函数。

应用 Effect Hook

Effect Hook 能够让你在函数组件中执行副作用操作

数据获取，设置订阅以及手动更改React组件中的DOM都属于副作用。

你能够把useEffect Hook看做componentDidMount,componentDidUpdate和componentWillUnmount这三个函数组合。在React组件中，有两种常见副作用操作：须要革除的和不须要革除的。

  • 无需革除的effect

有时候，咱们只想在React更新DOM之后运行一些额定代码。比方发送网络申请，手动变更DOM，记录日志，这些都是常见的无需革除的操作。因为咱们在执行完这些操作之后，就能够疏忽他们了。

import React, { useState, useEffect } from 'react'

function Example() {
  const [count, setCount] = useState(0)

  // 与 componentDidMount 和 componentDidUpdate 类似
  useEffect(() => {
    // 应用浏览器 API 更新文档题目
    document.title = `You clicked ${count} times`
  })

  return (
    <div>
      <p>you clicked {count} times</p>
      <button onClick={() => setCount(count+1)}>        Click me      </button>
    </div>
  )
}

useEffect做了什么？

通过应用这个Hook，你能够通知React组件须要在渲染后执行某些操作。React会保留你传递的函数，并且在执行DOM更新之后调用它。

为什么在组件外部调用useEffect

将useEffect放在组件外部让咱们能够在effect中间接拜访countstate变量（或其它props）。这里Hook应用了JavaScript的闭包机制。

useEffect会在每次渲染后都执行吗？

是的，默认状况下，它在第一次渲染之后和每次更新之后都会执行。

useEffect函数每次渲染中都会有所不同？

是的，这是刻意为之的。事实上这正是咱们刻意在effect中获取最新的count的值，而不必放心过期的起因。因为每次咱们从新渲染，都会生成新的effect，替换掉之前的。某种意义上讲，effect更像是渲染后果的一部分————每个effect“属于”一次特定的渲染。

提醒：与componentDidMount或componentDidUpdate不同，应用useEffect调度的effect不会阻塞浏览器更新屏幕，这让你的利用看起来响应更快。大多数状况下，effect不须要同步执行。在个别情况下（例如测量布局），有独自的useLayoutEffectHook供你应用，其API与useEffect雷同。

  • 须要革除的effect

例如订阅内部数据源，这种状况下，革除工作是十分重要的，能够避免引起内存透露。

function Example() {
  const [count, setCount] = useState(0)
  const [width, setWidth] = useState(document.documentElement.clientWidth)

  useEffect(() => {
    document.title = `You clicked ${count} times`
  })

  useEffect(() => {
    function handleResize() {
      setWidth(document.documentElement.clientWidth)
    }
    window.addEventListener('resize', handleResize)
    return function cleanup() {
      window.removeEventListener('resize', handleResize)
    }
  })

  return (
    <div>
      <p>you clicked {count} times</p>
      <button onClick={() => setCount(count+1)}>        Click me      </button>
      <p>screen width</p>
      <p>{width}</p>
    </div>
  )
}

为什么要在effect中返回一个函数？

这是effect可选的革除机制。每个effect都能够返回一个革除函数，如此能够将增加和移除订阅的逻辑放在一起。它们都属于effect的一部分。

React何时革除effect？

React会在组件卸载的时候执行革除操作。effect在每次渲染的时候都会执行，在执行以后effect之前会对上一个effect进行革除。

留神：并不是必须为effect中返回的函数命名，也能够返回一个箭头函数或者起别的名称。

为什么每次更新的时候都要运行Effect

如下是一个用于显示好友是否在线的FriendStatus组件。从class中props读取friend.id，而后组件挂载后订阅好友的状态，并在卸载组件的时候勾销订阅。

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend,id,
      this.handleStatusChange
    )
  }
  componentWillUnmount() {
    ChatAPI.unsubscribeToFriendStatus(
      this.props.friend,id,
      this.handleStatusChange
    )
  }

然而当组件曾经当初屏幕上，friend prop发生变化时会产生什么？咱们组件将持续展现原来的好友状态，这是一个bug。而且咱们还会因为勾销订阅时应用谬误的好友ID导致内存透露或解体的问题。

在class组件中，咱们须要增加componentDidUpdate来解决这个问题。

  componentDidMount() {
    ChatAPI.subscribeToFriendStatus(
      this.props.friend,id,
      this.handleStatusChange
    )
  }
  componentDidUpdate(prevProps) {
    // 勾销订阅之前的friend.id
    ChatAPI.unsubscribeToFriendStatus(
      this.props.friend,id,
      this.handleStatusChange
    )
    // 订阅新的friend.id
    ChatAPI.subscribeToFriendStatus(
      this.props.friend,id,
      this.handleStatusChange
    )
  }
  componentWillUnmount() {
    ChatAPI.unsubscribeToFriendStatus(
      this.props.friend,id,
      this.handleStatusChange
    )
  }

如果应用Hook的话：

function FriendStatus(props) {
  useEffect(() => {
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)
    return () => {
      ChatAPI.unsubscribeToFriendStatus(props.friend.id, handleStatusChange)
    }
  })
}

它并不会收到此bug影响，因为useEffect默认就会解决。它会在调用一个新的effect之前对前一个effect进行清理。具体调用序列如下：

// Mount with { friend: {id: 100}} props
ChatAPI.subscribeToFriendStatus(100, handleStatusChange) // 运行第一个effect

// Update with { friend: {id: 200}} props
ChatAPI.unsubscribeToFriendStatus(100, handleStatusChange) // 革除上一个effect
ChatAPI.subscribeToFriendStatus(200, handleStatusChange) // 运行下一个effect

// Update with { friend: {id: 300}} props
ChatAPI.unsubscribeToFriendStatus(200, handleStatusChange) // 革除上一个effect
ChatAPI.subscribeToFriendStatus(300, handleStatusChange) // 运行下一个effect

// Unmount
ChatAPI.unsubscribeToFriendStatus(200, handleStatusChange) // 革除最初一个effect

通过跳过Effect进行性能优化

在某些状况下，每次渲染后都执行清理或者执行effect可能会导致性能问题。在class组件中，咱们能够通过在componentDidUpdate中增加对prevProps或prevState的比拟逻辑解决：

  componentDidUpdate(prevProps, prevState) {
    if (prevState.count !== this.state.count) {
      document.title = `You clicked ${count} times`
    }
  }

对于useEffect来说，只须要传递数组作为useEffect的第二个可选参数即可：

  useEffect(() => {
    document.title = `You clicked ${count} times`
  }, [count])

如果组件从新渲染时，count没有产生扭转，则React会跳过这个effect，这样就实现了性能的优化。如果数组中有多个元素，即便只有一个元素发生变化，React也会执行effect。

对于有革除操作的effect同样实用：

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatuschange)
    return () => {
      ChatAPI.unsubscribeToFriendStatus(props.friend.id, handleStatuschange)
    }
  }, [props.friend.id]) // 仅在props.friend.id发生变化时，从新订阅

留神：如果想执行只运行一次的effect(仅在组件挂载和卸载时执行)，能够传递一个空数组（[]）作为第二个参数。

Hook规定

  • 只在最顶层应用Hook

不要在循环，条件或嵌套函数中调用Hook，这样能确保Hook在每一次渲染中都依照同样的程序被调用。这让React可能在屡次的useState和useEffect调用之间放弃hook状态的正确。

  • 只在React函数中应用Hook

不要在一般的Javascript函数中调用Hook

自定义Hook

通过自定义Hook，能够将组件逻辑提取到可重用的函数中。

比方，咱们有如下组件显示好友的在线状态：

import React, { useState, useEffect } from 'react'

function FriendStatus(props) {
  const [isOnline, setIsOnline] = useState(null)

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)
    return () => {
      ChatAPI.unsubscribeToFriendStatus(props.friend.id, handleStatusChange)
    }
  })
  if(isOnline === null) {
    return 'Loading...'
  }
  return isOnline ? 'Online' : 'Offline'
}

当初假如聊天利用中有一个联系人列表，当用户在线时把名字设置为绿色。咱们能够把相似的逻辑复制并粘贴到FriendListItem组件中来，但这并不是现实的解决方案：

import React, { useState, useEffect } from 'react'

function FriendListItem(props) {
  const [isOnline, setIsOnline] = useState(null)

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)
    return () => {
      ChatAPI.unsubscribeToFriendStatus(props.friend.id, handleStatusChange)
    }
  })
  return (
    <li style={{ color: isOnline ? 'green': 'black'}}>
    {props.friend.name}    </li>
  )
}

提取自定义Hook

当咱们想在两个函数之间共享逻辑时，咱们会把它提取到第三个函数中。而组件和Hook都是函数，所以同样也实用这种形式。

自定义Hook是一个函数，其名称以“use”结尾，函数外部能够调用其它的Hook.

import React, { useState, useEffect } from 'react'

function useFriendStatus(friendID) {
  const [isOnline, setIsOnline] = useState(null)

  useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline)
    }
    ChatAPI.subscribeToFriendStatus(friendID, handleStatusChange)
    return () => {
      ChatAPI.unsubscribeToFriendStatus(friendID, handleStatusChange)
    }
  })
  return isOnline
}

所以，之前的FriendStatus和FriendListItem组件能够改写成如下：

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

这段代码等价于原来的示例代码吗？

等价，它的工作形式齐全一样。自定义Hook是一种天然遵循Hook设计的约定，而不是React的个性

自定义Hook必须以“use”结尾吗？

必须如此。这个约定十分重要。不遵循的话，因为无奈判断某个函数是否蕴含对其外部Hook的调用，React将无奈主动查看的你的Hook是否违反了Hook的规定。

在两个组件中应用雷同的Hook会共享state吗？

不会。每次应用自定义Hook时，其中的所有state和副作用都是齐全隔离的。

React Hooks原理

上伪代码：

useState

import React from 'react'
import ReactDOM from 'react-dom'

let _state

function useState(initialValue) {
  _state = _state || initialValue

  function setState(newState) {
    _state = newState
    render()
  }
  return [_state, setState]
}

function App() {
  let [count, setCount] = useState(0)
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => {         setCount(count + 1)      }}>点击</button>
    </div>
  )
}

const rootElement = document.getElementById('root')

function render() {
  ReactDOM.render(<App/>, rootElement)
}

render()

useEffect

let _deps

function useEffect(callback, depArray) {
  const hasChangedDeps = _deps ? !depArray.every((el, i) => el === _deps[i]) : true
  if (!depArray || hasChangedDeps) {
    callback()
    _deps = depArray
  }
}


useEffect(() => {
  console.log(count)
})

Not Magic, just Arrays

以上代码尽管实现了能够工作的useState和useEffect，然而都只能应用一次。比方：

const [count, setCount] = useState(0)
const [username, setUsername] = useState('fan')

count和usename永远相等，因为他们共用一个_state，所以咱们须要能够存储多个_state和_deps。咱们能够应用数组来解决Hooks的复用问题。

如果所有_state和_deps寄存在一个数组，咱们须要有一个指针能标识以后取的是哪一个的值。

import React from 'react'
import ReactDOM from 'react-dom'

let memorizedState = []
let cursor = 0  //指针

function useState(initialValue) {
  memorizedState[cursor] = memorizedState[cursor] || initialValue
  const currentCursor = cursor
  function setState(newState) {
    memorizedState[currentCursor] = newState
    render()
  }
  return [memorizedState[cursor++], setState]
}

function useEffect(callback, depArray) {
  const hasChangedDeps = memorizedState[cursor] ? !depArray.every((el, i) => el === memorizedState[cursor][i]) : true
  if (!depArray || hasChangedDeps) {
    callback()
    memorizedState[cursor] = depArray
  }
  cursor++
}

function App() {
  let [count, setCount] = useState(0)
  const [username, setUsername] = useState('hello world')
  useEffect(() => {
    console.log(count)
  }, [count])
  useEffect(() => {
    console.log(username)
  }, [])
  return (
    <div>
      <div>{count}</div>
      <button onClick={() => { 
        setCount(count + 1)
      }}>点击</button>
    </div>
  )
}

const rootElement = document.getElementById('root')

function render() {
  cursor = 0
  ReactDOM.render(<App/>, rootElement)
}

render()

到这里，咱们就能够实现一个任意复用的useState和useEffect了。

评论

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

这个站点使用 Akismet 来减少垃圾评论。了解你的评论数据如何被处理。

更多文章