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 官网