阅读 96

react 小书学习笔记-state/props


前言:迫于所有项目都要想 react 转移,开始初步的了解 react,由于以前已经学习了 react 的基础知识,今天了解一下 state 和 props 的概况。

针对对象:前端初学者,MVVM 框架初步了解者。


state props 概况

  • state 是组件保存,控制,修改自己的可变状态。
  • state 可以通过 props 来初始化自己的状态 state
  • props 主要作用是让使用该组件的父组件可以传入参数来配置该组件

使用情况

如果你觉得还是搞不清 stateprops 的使用场景,那么请记住一个简单的规则:尽量少地用 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

    image

  • good one

    image

  • better one

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

image

参考

1、book : react 小书

2、react 官网

文章分类
前端