学习目标

  • 了解组件模式

组件分类

  • 类组件又称为动态组件,类组件中可自定义方法,一般有事件交互(点击事件、触发事件)和数据修改的操作。
  • 函数式组件(静态组件)比较简单,一般用于静态、没有内容交互事件内容的组件页面。函数式组件中嵌套函数不方便。
  • 复合组件:组件中包含其他组件,复合组件中既可以有类组件又可以有函数组件。

注:ReactDOM.render中只能放一个组件,但是组件中可以放其他组件。

实例一 函数式组件

import React from 'react';
import ReactDOM from 'react-dom';
//函数式组件
function Child() {
return (
<div>
<h1>函数式组件:hello, world.</h1>
</div>
)
}
ReactDOM.render(
<Child />, // <Child></Child>
document.querySelector('#root')
)

React 组件_嵌套

函数式组件的首字母要大写。

实例二 类组件

import React from 'react';
import ReactDOM from 'react-dom';
// 类组件
class HelloWorld extends React.Component {
render() {
return (
<div>
<h1>类组件:hello, world.</h1>
</div>
)
}
}
ReactDOM.render(
<HelloWorld />, // <HelloWorld></HelloWorld>
document.querySelector('#root')
)

React 组件_函数式_02

类组件需要用render渲染。

实例三 函数式组件传入props

import React from 'react';
import ReactDOM from 'react-dom';
//函数式组件
function Child(props) {
console.log(props)

let title = <h2>我是副标题</h2>
let weather = props.weather

let isGo = weather=='下雨'?"不出门":"出门"

return (
<div>
<h1>函数式组件:hello, world.</h1>
{title}

<div>
是否出门?
<span>{isGo}</span>
</div>
</div>
)
}
ReactDOM.render(
<Child weather="下雨"/>,
document.querySelector('#root')
)

React 组件_函数式_03

传入props是源于设计调用时的props。在render渲染时weather组件赋值,props因此得到属性为weather的值。

实例四 类组件传入props

import React from 'react';
import ReactDOM from 'react-dom';
// 类组件
class HelloWorld extends React.Component {
render() {
console.log(this)
return (
<div>
<h1>类组件:hello, world.</h1>
<h1>hello:{this.props.name}</h1>
</div>
)
}
}
ReactDOM.render(
<HelloWorld weather="fine" name="abc"/>, // <HelloWorld></HelloWorld>
document.querySelector('#root')
)

React 组件_点击事件_04

实例五 组件嵌套

import React from 'react';
import ReactDOM from 'react-dom';
// 函数式组件
function Child(props) {
console.log(props)


let title = <h2>我是副标题</h2>
let weather = props.weather


let isGo = weather=='下雨'?"不出门":"出门"


return (
<div>
<h1>函数式组件:hello, world.</h1>
{title}


<div>
是否出门?
<span>{isGo}</span>
</div>
</div>
)
}
// 类组件
class HelloWorld extends React.Component {
render() {
console.log(this)
return (
<div>
<h1>类组件:hello, world.</h1>
<Child />
</div>
)
}
}
ReactDOM.render(
<HelloWorld />, // <HelloWorld></HelloWorld>
document.querySelector('#root')
)

React 组件_react_05

类组件嵌套函数组件。

实例六 打印props

import React from 'react';
import ReactDOM from 'react-dom';
// 函数式组件
function Child(props) {
console.log(props)
let title = <h2>我是副标题</h2>
let weather = props.weather
let isGo = weather=='下雨'?"不出门":"出门"
return (
<div>
<h1>函数式组件:hello, world.</h1>
{title}


<div>
是否出门?
<span>{isGo}</span>
</div>
</div>
)
}
// 类组件
class HelloWorld extends React.Component {
render() {
console.log(this)
return (
<div>
<h1>类组件:hello, world.</h1>
<h1>hello: {this.props.name}</h1>
<Child />
</div>
)
}
}
ReactDOM.render(
<HelloWorld name="Bill"/>, // <HelloWorld></HelloWorld>
document.querySelector('#root')
)

React 组件_函数式_06

props是一层一层向下传递,附件HelloWorld没有传递属性给Child,因此Child组件打印属性值为空。

修改代码,增加上一层传递属性

import React from 'react';
import ReactDOM from 'react-dom';
// 函数式组件
function Child(props) {
console.log(props)
let title = <h2>我是副标题</h2>
let weather = props.weather
let isGo = weather=='下雨'?"不出门":"出门"
return (
<div>
<h1>函数式组件:hello, world.</h1>
{title}

<div>
是否出门?
<span>{isGo}</span>
</div>
</div>
)
}
// 类组件
class HelloWorld extends React.Component {
render() {
console.log(this)
return (
<div>
<h1>类组件:hello, world.</h1>
<h1>hello: {this.props.name}</h1>
<Child weather={this.props.name}/>
</div>
)
}
}
ReactDOM.render(
<HelloWorld name="Bill"/>, // <HelloWorld></HelloWorld>
document.querySelector('#root')
)

React 组件_函数式_07