React组件和 组件数据通信

定时器

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

 function t() {
    let ele = <h1>{new Date().toLocaleTimeString()}</h1>
ReactDOM.render(ele,document.getElementById('root'))

}
t();
setInterval(t,1000);

React 组件 jsx是组件的基本组成单位

定义组件要求

• 组件名 首字母必须大写 区别HTML标签
• 定义后 可以当做一个标签来使用
• 若使用函数定义组件 必须返回一个jsx元素

函数定义组件 function 必须有返回一个jsx元素

function Wel(props){
//props 是一个对象 在渲染或父组件通过props(属性)传递过来的数据
    return(
    <div>
    
    </div>
    )
}
ReactDOM.render(<Wel/>,document.getElementById('root'))
//执行时 首先把当前组件的行内属性 进行打包封装 把其封装成一个对象
把这个对象传给组件函数  执行组件函数 获取对应的虚拟DOM对象

虚拟DOM转成真实DOM 插入到真实的DOM中

类定义组件 class 需继承React 上的Component 类 定义组件的原型上必须有一个render函数 返回一个JSX元素

class Header extends Component{
    constructor(){
        super()
    }
    render(){
        return(
        <div></div>
        )
    }
    
}

**class和function定义组件的不同**

数据驱动 当数据发生改变时 视图就会自动发生改变（数据映射视图）

• props 接收的是行内属性 是从外部传过来的数据
• state 是组件私有的 定义时 需要创建
• class定义的组件中有 this state 声明周期
• function 声明的组件 只有props

props 映射视图 当数据发生变化时 组件会自动重新渲染

state 映射视图 数据源有两个 props 和state

• props 是父组件传递过来的
• state 是组件自己管控的状态 状态时组件的私有数据
• 在React中使用state 必须使用class创建组件 -constructor 中初始化一个状态

  this.state = {
      初始化
  }
  

  • state 中的数据不能直接修改 若需要更新数据 调用this.setState方法 会合并setState方法
    • 函数 this.setState((prevState)=>{})
    • 对象 this.setSate({num:5})
  • state发生改变时 触发render函数执行更新DOM

react 中绑定数据 标签内属性 onClick = {事件处理函数}

在定义事件函数时 一般把事件函数声明在原型上 绑定事件时 通过 this.add访问事件函数

props校验 需要第三方库prop-types

<!--安装-->
yarn add prop-types --save

static propTypes = {
    name: PropType.string.isRequired, // 要求 name 是字符串类型 isRequired 表示必传
    age: PropType.number.isRequired // 要求 age 是数字类型，isRequired 表示必传
}