React props

React Props

state 和 props 主要的区别在于 props 是不可变的，而 state 可以根据与用户交互来改变。这就是为什么有些容器组件需要定义 state 来更新和修改数据。 而子组件只能通过 props 来传递数据。

实例：

// 定义一个 Welcome 函数组件
function Welcome(props) {
    return <h1>Hello, {props.name}</h1>;
}

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

实例解析：

1. 我们调用 ReactDOM.render() 函数，并传入 <Welcome name="晓孤语" /> 作为参数。
2. React 调用 Welcome 组件，并将 {name: '晓孤语'} 作为 props 传入。
3. Welcome 组件将 <h1>Hello, 晓孤语</h1>元素作为返回值。
4. React DOM 将 DOM 高效地更新为 <h1>Hello, 晓孤语</h1>。

当 React 元素为用户自定义组件时，它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件，这个对象被称之为 “props”。