`` 與 `renderElement` 雜交

最近由於工做和學校論文上的事情始終沒有讓本身能靜下心來去好好寫點總結，但感受其實時間仍是有的，並且寫東西確實能讓我身心愉快。感受脫離了這紛雜的塵世，好似乘一片竹榻，遊蕩在山水之間。之後仍是但願本身能堅持下來，多總結總結，多寫一些對本身有用的東西。

下面直接切入正題，本身「引入」組件通常是兩種方式， 與 renderElement, 這裏爲何要加引號呢，是由於 renderElement可能不算引入，它原本就在其要調用的組件的內部，這裏並非想記錄這兩種方式，你們能夠稍微往下看一下。

外部導入

import * as React from "react"

const Input = props => {
  const { inputValue, setInputValue } = props
  const onChange = event => {
    const value = event.target.value
    setInputValue(value)
  }
  return <input onChange={onChange} value={inputValue} type="text" />
}

export const Counter: React.FunctionComponent = props => {
  const [inputValue, setInputValue] = React.useState("")

  return <Input inputValue={inputValue} setInputValue={setInputValue} />
}

複製代碼

內部渲染

import * as React from "react"

export const Counter: React.FunctionComponent = props => {
  const [inputValue, setInputValue] = React.useState("")
  
  const renderInput = props => {
  const { inputValue, setInputValue } = props
  const onChange = event => {
    const value = event.target.value
    setInputValue(value)
  }
  return <input onChange={onChange} value={inputValue} type="text" />
}

  return (
  	{renderInput({inputValue, setInputValue})}
  )
}
複製代碼

不走尋常路🐒

這兩種狀況咱們在開發過程當中是司空見慣的，可是你有沒有想過爲何不像下面這樣去用

import * as React from "react"

export const Counter: React.FunctionComponent = props => {
  const [inputValue, setInputValue] = React.useState("")
  
  const Input = props => {
  const { inputValue, setInputValue } = props
  const onChange = event => {
    const value = event.target.value
    setInputValue(value)
  }
  return <input onChange={onChange} value={inputValue} type="text" />
}

  return (
  	<Input inputValue={inputValue} setInputValue={setInputValue} />
  )
}
複製代碼

咱們在組件內部建立了一個函數組件，並用 <Element / > 的方式去調用了它，看似好像合情合理，沒有什麼太大的問題，但其實有很大的差異，你們能夠看一下 示例，你會發現每次在輸入框輸入內容的時候輸入框都會失焦，個人推測大致以下：

當輸入框輸入值時觸發 setInputValue 致使 inputValue 改變，Counter 組件從新渲染，Input 組件由於寫在Counter組件內部，因此也會從新建立，也就是說此時的 Input 已經不是上次的 Input，而以 <Element /> 這種形式渲染組件會根據 Input 組件變化與否去選擇複用或是從新建立以前的組件，由於此時 Input 已經變化，因此每次都會從新建立 Input ，也就會致使失焦。

外部導入那種狀況 Input 組件自己在 Counter 從新渲染時不會從新建立，所以也就不會出現這種問題。 那內部渲染那種狀況爲何不會出現失焦這種狀況呢，一樣，當輸入框輸入值時 Counter 組件也會從新渲染，此時 renderInput 也會從新建立，但在渲染組件時只至關於函數調用，雖然方法不一樣，可是返回的結果是同樣的，其實也就至關於下面這種形式

import * as React from "react"

export const Counter: React.FunctionComponent = props => {
  const [inputValue, setInputValue] = React.useState("")
  
  return (
 		<input onChange={onChange} value={inputValue} type="text" />
  )
}
複製代碼

其實這個問題也屬於比較小的問題，本身也是在開發中偶然想到就去玩了一下並把過程記錄了下來，人嘛，玩仍是要玩的🤣

原文連接