react 小書學習筆記-state/props

---

前言：迫於全部項目都要想 react 轉移，開始初步的瞭解 react，因爲之前已經學習了 react 的基礎知識，今天瞭解一下 state 和 props 的概況。

針對對象：前端初學者，MVVM 框架初步瞭解者。

---

state props 概況

• state 是組件保存，控制，修改本身的可變狀態。
• state 能夠經過 props 來初始化本身的狀態 state
• props 主要做用是讓使用該組件的父組件能夠傳入參數來配置該組件

使用狀況

若是你以爲仍是搞不清 state和props 的使用場景，那麼請記住一個簡單的規則：儘可能少地用 state，儘可能多地用 props。

無狀態組件 （stateless）

• 沒有 state 的組件叫做無狀態組件（stateless component）
• 有 state 的組件叫做有狀態組件（stateful component）

react.js 鼓勵無狀態組件在 0.14 版本引入函數式組件-----一種不能使用 state 組件

• 原來使用這樣的方法

class HelloWorld extends Component {
  constructor() {
    super()
  }

  sayHi () {
    alert('Hello World')
  }

  render () {
    return (
      <div onClick={this.sayHi.bind(this)}>Hello World</div>
    )
  }
}
複製代碼

• 函數式組件編寫

const HelloWorld = (props) => {
  const sayHi = (event) => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello World</div>
  )
}
複製代碼

函數式組件就是一種只能接受 props 和 提供 render 方法的類組件

鼓勵使用無狀態組件

• 由於狀態會帶來管理的複雜性，咱們儘可能多地寫無狀態組件，儘可能少地寫有狀態的組件。這樣會下降代碼維護的難度，也會在必定程度上加強組件的可複用性。

咱們更加但願把狀態 state 留在上層數據

• 假設咱們作一個評論的列表
  • 評論列表：CommentApp
    • CommentInput（輸入框） CommentList(列表展現你)
  • 其中我麼推薦把數據放在 父級的 CommentApp 上，而後子級經過 props 來獲取數據。
  • 看下圖

• bad one

  

• good one

  

• better one

  • 咱們若是有公用的組件的話，跟好的方法是放在公用的父組件

參考

一、book : react 小書

二、react 官網