React组件之间的通信方式总结（下）

一、写一个时钟

• 用 react 写一个每秒都可以更新一次的时钟

import React from 'react'
import ReactDOM from 'react-dom'


function tick() {
   
    let ele = <h1>{
    new Date().toLocaleTimeString() }</h1>

    // Objects are not valid as a React child (found: Sun Aug 04 2019 20:34:51 GMT+0800 (中国标准时间)). If you meant to render a collection of children, use an array instead.
    // new Date() 是一个对象数据类型的值，React 元素不接收对象作为其子元素
    ReactDOM.render(ele, document.querySelector('#root'))
}

tick()

setInterval(tick, 1000) // 如果不包在一个函数中，时钟是不会每秒更新一次
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

但是 React 和 Vue 相同都是数据驱动的，但是这个时候和数据驱动没啥关系，每隔1秒钟重新创建一个 ele，然后再渲染到页面中，视图才发生变化；为了使用数据驱动，我们需要使用 React 的组件

二、React 的组件

在 React 组件中，jsx 元素（也称 react 元素）是组件的基本组成单位
在 react 中定义组件有两种方式：

1. 函数（function）定义组件
2. 类（class）定义组件

• 定义组件的要求：

1. 1. 组件的名字首字母必须大写，为了在写 jsx 时区分原生 html 标签
2. 1. 组件定义后，就可以当做一个标签在 jsx 语法中使用
3. 1. 如果使用函数定义组件必须返回一个 jsx 元素

2.1 React 的函数组件

react 使用函数定义组件，就是声明一个函数;

• 函数接收一个 props 参数；props 是对象，是在渲染或者父组件通过 prop（属性） 传递过来的数据；
• 函数返回一个 jsx 元素，在组件中需要的数据可以通过 props 传入；

参考 前端react面试题详细解答

// 1. 函数定义组件
function Welcome(props) {
   
    // props 是一个对象，是使用组件时，写在组件行内的属性和属性值组成的；
    console.log(data)
    return (<div>
        <p>{
   props.data.name}; {
   props.data.age}</p>
        <p>{
   props.x}</p>
    </div>)
}

ReactDOM.render(<Welcome data={
   {
   name: 'mabin', age: 18}} x='hahah' />, document.querySelector('#root'));
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

• ReactDOM.render() 会根据第一个参数的类型不同执行不同的操作；

1. 1. 如果是组件，当 render 执行时，首先会把当前组件的行内属性进行打包封装，把其封装成一个对象，把这个对象传给组件函数
2. 1. 执行组件函数，获取对应的虚拟 DOM 对象
3. 1. 把虚拟 DOM 转成真实 DOM 对象，并且插入到真实的 DOM 中

2.2 React 的 class 组件

通过 class 定义一个组件

1. 通过 class 来定义一个组件，需要继承 React 上的 Component 这个类
2. 在定义组件上的原型上必须有一个 render 函数，且 render 函数需要返回一个顶级的 jsx 元素

-看🌰

class Header extends Component {
   
    constructor () {
   
        super()
    }

    render () {
   
        // 在 render 函数中通过 this.props 访问 props
        return (<div>
            {
   this.props.content}
        </div>)
    }
}

class Hello extends Component {
   
    constructor (props) {
   
        super()
        // 注意在构造函数中不能访问 this.props ，props 会作为形参传入
    }

    render () {
   
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27