React組件會在什么時候render？

1. state使用setState正確改變；
2. props改變，并且符合shouldComponentUpdate為true時候渲染；
3. 父組件渲染，引起子組件渲染；（class組件）
   在不添加任何控制的情況下，即使父組件中props的更新與子組件無關，子組件仍然會渲染；

const RenderFatherComp: React.FC<IProps> = () => {
  const [father, setFather] = useState('父親');
  return <>
    <button onClick={() => setFather((f) => f + 'father')}>
      click to change father
    </button>
    <div>this is {father}</div>
    <RenderComp ></RenderComp>
  </>
}

class RenderComp extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      count: 0,
    }
  }
  onClick = () => {

  }
  render() {
    console.log('兒子render')
    return <>
      <div>
        <button onClick={this.onClick}>兒子</button>
        <h2>上面才是{this.props.father}</h2>
      </div>
    </>
  }
}

4. 手動調用ReactDOM.render/forceUpdate

生命周期函數作用？

可以用在在組件運行的不同時刻執(zhí)行自定義操作的方法；
生命周期中的部分函數，執(zhí)行順序是固定的：

掛載(mounting)

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

更新（updating）

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting(卸載)

• componentWillUnmount()

error handling(錯誤處理)

• static getDerivedStateFromError()
• componentDidCatch()

組件什么時候被銷毀？

• 手動調用ReactDOM.unmountComponentAtNode(container)
  官方文檔：

從 DOM 中卸載組件，會將其事件處理器（event handlers）和 state 一并清除。如果指定容器上沒有對應已掛載的組件，這個函數什么也不會做。如果組件被移除將會返回 true，如果沒有組件可被移除將會返回 false；

• 父組件銷毀子組件隨之銷毀；

• 在父組件中寫判斷語句，如果符合條件返回子組件，不符合返回'' || null，數據驅動控制組件銷毀；

• 在class組件執(zhí)行componentWillUnmount生命周期時，卸載componentDidMount等前序生命周期中執(zhí)行的副作用，例如：
  事件監(jiān)聽，異步函數，多余的變量，沒有恢復的狀態(tài)；

受控組件和非受控組件？

受控組件：所有的值受外部控制，需要用狀態(tài)來手動維護，除了value為null || undefined 的情況，都是受value控制，在響應輸入后立馬變回原值，對于其他框架/庫遷移后的代碼不友好；

如果我們希望輸入框有默認值，并且輸入時可以改變這個值，那么可以使用 defaultValue
屬性：

const Controlled = () => (
 <form>
 <input type="text" defaultValue="Hello React" />
 <button>Submit</button>
 </form>
)

非受控組件：不在外部維護組件狀態(tài)，所有的值都來源于DOM(keeps the source of truth in the DOM)，可以對外暴露方法，在外部可以拿到改變后的狀態(tài)，更符合其他框架/庫遷移時的條件；

什么是不可變數據？

通過返回一個新的對象來更新狀態(tài)，包括但不限于Object.assign({}, oldData), {...oldData}
因為組件中shouldComponentUpdate是淺比較，如果直接改變對象，不會觸發(fā)組件的更新；

React、React DOM、React Component 和React Elements的關系？

什么是JSX？

JSX是createElement的語法糖，createElement 是純的javascript數據；
官方示例：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

將會編譯為

React.createElement({
  type: '',
  {  
    color: 'blue',
    shadowSize: '2'
  },
  'Click me'
})

RenderProps和函數組件有什么區(qū)別？

Render Prop是指組件接受一個函數作為屬性，在調用該函數時渲染傳遞的組件；

好處：

同級的組件可以共享state；
可以通過render屬性傳遞一個封裝組件和復合數據，增強內聚；

區(qū)別

renderProps本質上是函數，沒有生命周期和持久化，不可以控制渲染；
函數組件可以有持久化數據，自主渲染，包含有組件狀態(tài)；