组件&Props

组件从概念上看就像是函数,它可以接收任意的输入值 ( 称之为 “props” ),并返回一个需要在页面上展示的 React 元素.

定义组件的方法:

1. 函数定义
2. 类定义

定义一个组件最简单的方式是使用 JavaScript 函数:

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

也可以使用 ES6 class 来定义一个组件:

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

上面两个组件在React中是相同的.

组件渲染:

当 React 遇到的元素是用户自定义的组件,他会将JSX属性作为单个对象传递给该组件,这个对象称之为 "props"

例如: 下面这段代码会在页面上渲染出 “hello , react”

function Welcome(props) {
	return <h1> hello, { props.name } </h1>
}
const element = <Welcome name="react" />;
ReactDOM.render(
	element,
	document.getElementById("root")
);

注意: 组件名称必须以大写字母开头.
例如: <div /> 表示一个 DOM 标签,但 <Welcome /> 表示一个组件,并且在使用该组件的时候你必须定义或引入它.
警告: 组件的返回值只能有一个根元素.

Props 的只读性:

无论是使用函数或者是类来声明一个组件,它决不能修改它自己的props.
划重点: 所有的 React 组件 必须像纯函数那样使用它们的props.

当然,应用的界面是随时间动态变化的,在后面会介绍一种称为 "state"的新概念. State 可以在不违反上述规则的情况下,根据用户操作,网络响应,或者其他状态改变,使组件动态的响应并改变组件的输出.