组件Component
组件和props的基础使用
组件是什么?
把逻辑精密的内容放在一个组件中,把不同组件的依赖关系弱化,每个组件尽可能独立
组件的重要内容
-
组件当中的构建方式
-
组件内的属性
-
生命周期
react的组件氛围3个部分分别是属性props,状态state和生命周期,react的组件是一个非常重要的概念,通过组件可以把页面的UI部分分割成独立高复用性的部件,让每一个开发者更加专注于一个个独立的部件。
组件和组件化
组件就是用来页面局部功能的代码集合,简化页面的复杂图,提高运行效率。
组佳化 当前程序都是使用组件完成的,这就是一个组件化的应用。
组件的创建
组件的名字采用驼峰命名法首字母大写,单词字母大写。
- 函数组件/无状态组件
<script type="text/babel">
// 无状态的组件方式
function MyComponent(){
return (
<div>我是一个无状态组件</div>
)
}
// 使用组件,组件就是自定义标签
let dom = <MyComponent/>
ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>
父子组件
<script type="text/babel">
// 父子组件
function MyComA(){
return ( <div>我是子组件A</div> )
}
function MyComB(){
return ( <div>我是子组件B</div> )
}
function MyComC () {
return ( <div>
我是父组件A
<MyComA />
<MyComB />
<MyComA />
</div> )
}
let dom = <MyComC />
ReactDOM.render(dom, document.getElementById("reactDemo"))
</script>
- 类组件 class
定义语法
class MyComponent extends React.Component {
render (){
return (<div>
{/*此处写内容*/}
</div>)
}
}
props
props是什么
props 是react中一个重要的属性,是组件对外的接口,使用props就可以从组件的外部想组件的内部进行数据传递,也可以完成父组件给子组件的数据局传递。
注意 无论是无状态组件还是类组件,都不能修改自身的props
props的使用
- 无状态组件
function MyComponent(props){
return (
<div>我是一个无状态组件 --- props: {props.text}</div>
)
}
let dom = <MyComponent text="这是props.Text"/>
ReactDOM.render(dom, document.getElementById("reactDemo"))
多值传递,将其变成一个对象,通过{...obj}
的方式传递
let user = {
name: "laoshiren",
course: "react"
}
function MyComponent(props){
return (
<div>
<div>对象数据 name:
{props.name}
</div>
<div>对象数据 course:
{props.course}
</div>
</div>
)
}
let dom = <MyComponent {...user}/>
- 类组件
let user = {
name: "laoshiren",
course: "react"
}
class MyComponent extends React.Component {
render (){
return (
<div>
我是类组件
<div>name: {this.props.name}</div>
<div>course: {this.props.course}</div>
</div>
)
}
}
let dom = <MyComponent {...user}/>