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 Worlddiv>
    )
  }
}
复制代码

• 函数式组件编写

const HelloWorld = (props) => {
  const sayHi = (event) => alert('Hello World')
  return (
    <div onClick={sayHi}>Hello Worlddiv>
  )
}
复制代码

函数式组件就是一种只能接受 props 和 提供 render 方法的类组件

鼓励使用无状态组件

• 因为状态会带来管理的复杂性，我们尽量多地写无状态组件，尽量少地写有状态的组件。这样会降低代码维护的难度，也会在一定程度上增强组件的可复用性。

我们更加希望把状态 state 留在上层数据

• 假设我们做一个评论的列表
  • 评论列表：CommentApp
    • CommentInput（输入框） CommentList(列表展示你)
  • 其中我么推荐把数据放在 父级的 CommentApp 上，然后子级通过 props 来获取数据。
  • 看下图
• bad one

image

• good one

image

• better one
  • 我们如果有公用的组件的话，跟好的方法是放在公用的父组件

image

参考

1、book : react 小书

2、react 官网