React组件概述

62 阅读2分钟

组件介绍

组件是构建 React 的基石,可以这么说,一个 React 应用就是构建在 React 组件之上的。

组件有两个核心概念:

  • props
  • state

一个组件就是通过这两个属性的值在 render 方法里面生成这个组件对应的 HTML 结构。

props

props 就是组件的属性,由外部通过 JSX 属性传入设置,一旦初始设置完成,就可以认为 this.props 是不可更改。

state

state 是组件的当前状态,根据状态 state 呈现不同的 UI 展示。一旦状态(数据)更改,组件就会自动调用 render 重新渲染 UI,这个更改的动作会通过 this.setState 方法来触发。

无状态组件

我们也可以用纯粹的函数来定义无状态的组件(stateless function),这种组件没有状态,没有生命周期,只是简单的接受 props 渲染生成 DOM 结构,它的作用在于可以进行纯静态展示,例如按钮、输入框等。

无状态组件非常简单,开销很低,如果可能的话尽量使用无状态组件。比如使用箭头函数定义:

const HelloMessage = (props) => <div> Hello {props.name}</div>;
render(<HelloMessage name="John" />, mountNode);

组件生命周期

一般来说,一个组件类由 extends Component 创建,并且提供一个 render 方法以及其他可选的生命周期。

生命周期函数

装载组件触发

componentWillMount

只会在装载之前调用一次,在 render 之前调用,我们可以在这个方法里面调用 setState 改变状态,并且不会导致额外调用一次 render

componentDidMount

只会在装载完成之后调用一次,在 render 之后调用,从这里开始可以通过 ReactDOM.findDOMNode(this) 获取到组件的 DOM 节点。

更新组件触发

这些方法不会在首次 render 组件的周期调用,只有在组件状态 state 发生变化之后才会调用。

  • componentWillReceiveProps
  • shouldComponentUpdate
  • componentWillUpdate
  • componentDidUpdate

卸载组件触发

  • componentWillUnmount

组件类型

React组件有两种类型:

  • 类组件
  • 函数式组件

React类组件与函数式组件有什么不同

函数组件是一个纯函数,它接收一个 props 对象返回一个 react 元素;而类组件需要去继承React.Component并且创建 render 函数返回 react 元素。

组件间通信

父子组件间通信

这种情况下很简单,就是通过 props 属性传递,在父组件给子组件设置 props,然后子组件就可以通过 props 访问到父组件的数据/方法,这样就搭建起了父子组件间通信的桥梁。

非父子组件间的通信

对于简单的应用,我们可以使用全局事件 Pub/Sub 模式,在 componentDidMount 里面订阅事件,在 componentWillUnmount 里面取消订阅,当收到事件触发的时候调用 setState 更新 UI。

但对于比较复杂的应用,一般使用 Redux 来解决。