当 React 遇到一个代表用户定义组件的元素时,它将 JSX 属性以一个单独对象的形式传递给相应的组件。 我们将其称为 “props” 对象。
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="China" />;
ReactDOM.render(
element,
document.getElementById('root')
);
如上代码所示:其实props 就是集合了所有属性的一个对象
以上代码在页面上渲染 “Hello, China”
这里需要强调一点 Props 是只读的 : 无论你用函数或类的方法来声明组件, 它都无法修改其自身 props.
function sum(a, b) {
return a + b;
}
这种函数称为 “纯函数” ,因为它们不会试图改变它们的输入,并且对于同样的输入,始终可以得到相同的结果
反之, 以下是非纯函数, 因为它改变了自身的输入值:
function withdraw(account, amount) {
account.total -= amount;
}
虽然 React 很灵活,但是它有一条严格的规则:所有 React 组件都必须是纯函数,并禁止修改其自身 props
state
允许 React 组件在不违反上述规则的情况下, 根据用户操作, 网络响应, 或者其他随便什么东西, 来动态地改变其输出。