React文档: 组件

一. 组件声明

两种声明是等效的,都是React的组件.

1. 函数类组件

函数类组件本身就是一个JavaScript函数, 个人认为比较简单,类似如下代码

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2. class类组件

class类组件类似如下,比较健全的声明,类似如下代码

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

二. 组件props

React默认JSX语法中, 小写字母开头的组件都视为原生组件,大写字母开头的认为是React组件

1. props概述

组件的props是JSX接受到的属性和子组件,其被转为单个对象传递给组件内部, 称之为props.

如下代码中,JSX表达式element的name="Sara"则被封装为一个对象({name: 'Sara'})传给Welcome组件,Welcome组件内用props调用.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

2. props只读性

props是只读的,这点跟Vue一样的, 如需组件内部状态灵活改变, 需要组件的state, 类似于Vue中子组件声明data属性来接受props.

三. 组件state

state类似于Vue组件内部被定义的data属性,组件内部能够访问到,外部无法访问, state的属性值也可以作为props被传递到其子组件.

1. state更新

必须显式的调用setState方法, 声明state必须在constructor内部完成.