React函数式组件化 & props参数传递
函数式组件
// 第一种创建组件的方式（函数式组件）
// 组件首字母必须大写
function Hello() {
// 如果在一个组件中 return 一个null,则表示此组件什么都不渲染
// return null
// 在组件中，必须返回一个合法的jsx虚拟dom元素
// 组件中的props永远都是只读的，不能被重新赋值
return <div>这是一个Hello组件</div>
}
定义变量 & 使用组件
const user = {
name: '沙赞',
age: 14
}
ReactDOM.render(<div name="123"><Hello name={user.name} age={user.age}></Hello> </div>, document.getElementById('app'))
通过props传递参数
function Hello(props) {
console.log(props)
return <div>这是一个Hello组件 --- {props.name}</div>
}
展开运算符简化传递props
那么如果user的属性值有很多,那么在组件里面再按照上面的写法就会很麻烦，这时我们可以使用展开运算符(...)来简化操作。
ReactDOM.render(<div name="123"><Hello {...user}></Hello> </div>, document.getElementById('app'))
