一、写一个时钟

  • 用 react 写一个每秒都可以更新一次的时钟
  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. function tick() {
  4. let ele = <h1>{ new Date().toLocaleTimeString() }</h1>
  5. // 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.
  6. // new Date() 是一个对象数据类型的值,React 元素不接收对象作为其子元素
  7. ReactDOM.render(ele, document.querySelector('#root'))
  8. }
  9. tick()
  10. setInterval(tick, 1000) // 如果不包在一个函数中,时钟是不会每秒更新一次

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

二、React 的组件

在 React 组件中,jsx 元素(也称 react 元素)是组件的基本组成单位
在 react 中定义组件有两种方式:

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

2.1 React 的函数组件

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

  • 函数接收一个 props 参数;props 是对象,是在渲染或者父组件通过 prop(属性) 传递过来的数据;
  • 函数返回一个 jsx 元素,在组件中需要的数据可以通过 props 传入;
  1. // 1. 函数定义组件
  2. function Welcome(props) {
  3. // props 是一个对象,是使用组件时,写在组件行内的属性和属性值组成的;
  4. console.log(data)
  5. return (<div>
  6. <p>{props.data.name}; {props.data.age}</p>
  7. <p>{props.x}</p>
  8. </div>)
  9. }
  10. ReactDOM.render(<Welcome data={{name: 'mabin', age: 18}} x='hahah' />, document.querySelector('#root'));
  • ReactDOM.render() 会根据第一个参数的类型不同执行不同的操作;
    1. 如果是组件,当 render 执行时,首先会把当前组件的行内属性进行打包封装,把其封装成一个对象,把这个对象传给组件函数
    2. 执行组件函数,获取对应的虚拟 DOM 对象
    3. 把虚拟 DOM 转成真实 DOM 对象,并且插入到真实的 DOM 中

2.2 React 的 class 组件

通过 class 定义一个组件

  1. 通过 class 来定义一个组件,需要继承 React 上的 Component 这个类
  2. 在定义组件上的原型上必须有一个 render 函数,且 render 函数需要返回一个顶级的 jsx 元素
  • 示例:
  1. class Header extends Component {
  2. constructor () {
  3. super()
  4. }
  5. render () {
  6. // 在 render 函数中通过 this.props 访问 props
  7. return (<div>
  8. {this.props.content}
  9. </div>)
  10. }
  11. }
  12. class Hello extends Component {
  13. constructor (props) {
  14. super()
  15. // 注意在构造函数中不能访问 this.props ,props 会作为形参传入
  16. }
  17. render () {
  18. return (
  19. <div>
  20. <Header content="现在是北京时间:" />
  21. <p>{this.props.data.toLocaleString()}</p>
  22. </div>
  23. )
  24. }
  25. }
  26. // 使用这个组件
  27. ReactDOM.render(<Hello data={new Date()} />, document.getElementById('root'));
  • ReactDOM.render() 渲染 class 声明的组件过程:
    1. 找到组件对应的类,然后 new 一下这个类,获得这个类的一个实例
    2. 通过实例找到当前类原型上的 render 函数,让 render 执行接收其返回的虚拟 DOM
    3. 将上一步的虚拟 DOM 转换成成真实 DOM ,插入到页面中

2.3 class 和 function 定义的组件有什么不同

React 也是数据驱动的,当数据发生变化时,视图就会自动发生变化(视图是数据的映射)。组件中的数据有两个来源:props 和 state,其中 props 就是组件被使用时接收的行内属性,是从外部传入的数据,而 state 是组件的私有数据,组件定义时就需要创建;

  1. class 定义的组件中有 this,state,生命周期的钩子,而 function 声明的组件只有 props;

三、数据映射视图

3.1 属性(props)映射视图

属性(prop)也是组件的数据,而视图是数据的映射,当数据发生变化,组件会自动重新渲染

  • 示例:
  1. function Welcome(props) {
  2. return <div>{props.time.toLocaleString()}</div>
  3. }
  4. setInterval(() => {
  5. // 每隔一秒钟 new Date的值会发生变化,即 Welcome 的 time prop 属性发生了变化,而视图自动变化
  6. let now = new Date()
  7. ReactDOM.render(<Welcome time={now} />, document.querySelector('#root'))
  8. }, 1000)
  • 示例2

把数据通过属性传递给组件

  1. function User(props) {
  2. console.log(props)
  3. let { name, age } = props;
  4. return <div>
  5. <p>{name}</p>
  6. <p>{age}</p>
  7. </div>
  8. }
  9. let data = {
  10. name: 'mabin',
  11. age: 18
  12. }
  13. // ReactDOM.render(<User name={data.name} age={data.age} />, document.getElementById('root'))
  14. ReactDOM.render(<User {...data}/>, document.getElementById('root')) // 可以使用展开运算符把一个对象传给组件的props,等效于上面的写法

3.2 状态(state) 映射视图

react 组件的数据有两个来源:props 和 state
属性(props):是父组件传递过来的
状态(state): 是组件自己管控的状态,状态是组件私有的数据

3.2.1 使用 state

  • 在 React 中如果使用 state 必须使用 class 创建组件;
  • 在 constructor 中初始化一个状态;通过 this.state 赋值一个对象的形式初始化;
  • state 中的数据不可以直接修改,如果要更新数据,需要调用 setState 方法 ,setState 方法会进行合并 setState有两种写法 一种是对象一种是函数,如果下一个状态依赖上一个状态,我们需要使用函数的形式
    • 函数: this.setState((prevState) => {})
    • 对象: this.setState({num: 5})
  • state 发生改变后触发 render 函数执行更新 DOM

3.2.2 在 react 中绑定事件

  • react 绑定事件时,需要使用驼峰命名法的事件名 onClick = { 事件处理函数 }
  • 在定义事件函数时,一般把事件函数声明在原型上,而绑定事件时,通过 this.add 访问这个事件函数
  • 示例:

我们来写一个计数器感受一下 React 的数据驱动

  1. class Count extends Component {
  2. constructor () {
  3. super()
  4. // 在 constructor 中初始化一个状态;通过this.state 赋值一个对象的形式初始化;
  5. // 只有用类声明的组件才有 state
  6. this.state = {
  7. num: 1,
  8. x: 2
  9. }
  10. // this.add = this.add.bind(this)
  11. }
  12. add = () => {
  13. // 在 react 中如果要修改 状态只能通过 this.setState() 方法修改
  14. // setState 方法会进行合并 setState 有两种写法 一种是对象一种是函数
  15. // 1. setState 可以接受一个回调,回调需要 return 一个新的 state 对象,新的对象中只需包含要修改的 属性即可,例如这里我们要修改 num,return 的对象只需要包含num不用包含 x,react 会自动合并
  16. // 如果下一个状态依赖上一个状态,我们需要使用函数的形式
  17. /*this.setState((prevState) => {
  18. console.log(prevState); // prevState 之前的状态对象
  19. return {
  20. num: prevState.num + 1
  21. }
  22. })*/
  23. // 2. setState 还可以接受一个对象,对象中需要包含要更新的 state 属性;
  24. this.setState({
  25. num: this.state.num + 1
  26. })
  27. // 我们发现,我们更新数据后,页面中使用 num 的地方的值也自动跟着改了;
  28. // react 同样是数据驱动的,当我们调用 setState 修改 state 时,react 会重新调用 render 函数,得到虚拟DOM 然后调用 DOM-diff 算法,把修改的那一部分重新渲染;
  29. }
  30. render () {
  31. // react 绑定事件时,需要使用驼峰命名法的事件名 onClick = { 事件处理函数 }
  32. // 在定义事件函数时,一般把事件函数声明在原型上,而绑定事件时,通过 this.add 访问这个事件函数
  33. return (<div>
  34. <p>NUM: {this.state.num} </p>
  35. <p>X: {this.state.x} </p>
  36. <button onClick={this.add}>给num1</button>
  37. </div>)
  38. }
  39. }
  40. ReactDOM.render(<Count />, document.getElementById('root'))

四、属性(props) 校验

和 Vue 的 props 一样,React 的 props 同样支持校验;React 的 props 校验需要三方的库 prop-types

4.1 安装 prop-types

  1. yarn add prop-types --save

4.2 使用

使用 类型校验需要 在 class 创建组件时创建静态属性 propTypes,值是一个对象,对象的属性是需要校验的 属性,值对应的是校验规则;

  • 类型校验示例:
  1. static propTypes = {
  2. name: PropType.string.isRequired, // 要求 name 是字符串类型 isRequired 表示必传
  3. age: PropType.number.isRequired // 要求 age 是数字类型,isRequired 表示必传
  4. }
  • 此外,还可以给 prop 设置默认值,同样是通过类的静态属性设置,在创建组件时需要配置 defaultProps 静态属性;该属性的值是一个对象,该对象中属性是要设置默认值的 prop,值是 prop 的默认值
  1. static defaultProps = {
  2. name: '珠峰',
  3. age: 10
  4. }
  • 完整示例
  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  3. import PropType from 'prop-types'
  4. // React 的props 同样可以校验,但是需要一个第三方的库 prop-types
  5. class User extends Component {
  6. constructor (props) {
  7. super()
  8. console.log(props) // 对象,把行内属性封装到一个对象中
  9. // props.name = 123 // 如果想对 props 进行修改,可以在 constructor 中进行修改
  10. }
  11. static propTypes = {
  12. name: PropType.string.isRequired, // 要求 name 是字符串类型 isRequired 表示必传
  13. age: PropType.number.isRequired // 要求 age 是数字类型,isRequired 表示必传
  14. }
  15. // 给props 设置默认值
  16. static defaultProps = {
  17. name: '京东',
  18. age: 19
  19. }
  20. render () {
  21. return (<div>
  22. <p>{ this.props.name }</p>
  23. <p>{ this.props.age }</p>
  24. </div>)
  25. }
  26. }
  27. let obj = {
  28. name: '张三',
  29. age: 18
  30. };
  31. ReactDOM.render(<User {...obj} />, document.querySelector('#root'));

五、父子组件通信

5.1 父传子

在 React 中,父组件把数据传递给子组件,仍然是通过 props 的方式传递;

  • 示例
  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  3. class Header extends Component {
  4. render () {
  5. return (<h1>
  6. <p>{this.props.data}</p>
  7. </h1>)
  8. }
  9. }
  10. // 此时的 Panel 是父组件而 Header 是子组件,父子组件通信时父传子,仍然是通过 props 传递的
  11. class Panel extends Component {
  12. render () {
  13. return (<div className="container">
  14. <p>{this.props.news}</p>
  15. <Header data={this.props.min} />
  16. </div>)
  17. }
  18. }
  19. let data = {
  20. news: '快下课了',
  21. min: '拖几分钟'
  22. }
  23. ReactDOM.render(<Panel {...data} />, document.getElementById('root'))

5.2 子传父

在 React 中子组件修改父组件的方式和 Vue 不同;子组件如果想修改父组件的数据,父组件在使用子组件的时候,通过 props 传给子组件一个可以修改父组件的方法,当子组件需要修改父组件的数据时,通过 this.props 找到这个方法执行对应的方法

  • 示例:
  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  3. import 'bootstrap/dist/css/bootstrap.css'
  4. class Panel extends Component {
  5. static defaultProps = {
  6. a: 1
  7. }
  8. constructor () {
  9. super()
  10. this.state = {
  11. color: 'success'
  12. }
  13. }
  14. changeColor = (color) => {
  15. this.setState({
  16. color
  17. })
  18. }
  19. render () {
  20. return (<div className="container">
  21. <div className={`panel panel-${this.state.color}`}>
  22. <div className="panel-heading">
  23. {this.props.head}
  24. </div>
  25. <div className="panel-body">
  26. {this.props.body}
  27. </div>
  28. {/*通过 modifyColor 这个 props 把 Panel 组件的 changeColor 方法传递给 Footer 组件*/}
  29. <Footer type={this.state.color}
  30. modifyColor={this.changeColor} />
  31. </div>
  32. </div>)
  33. }
  34. }
  35. class Footer extends Component {
  36. change = () => {
  37. this.props.modifyColor('danger')
  38. }
  39. render () {
  40. return (<div className="panel-footer">
  41. <button className={`btn btn-${this.props.type}`} onClick={this.change}>变色</button>
  42. </div>)
  43. }
  44. }
  45. ReactDOM.render(<Panel head="头信息" body="信息主体"/>, document.getElementById('root'))
  46. // React 同样是单向数据流,即数据只能通过只能从父组件流向子组件
  47. // 所以子组件如果想修改父组件的数据,父组件在使用子组件的时候,通过props传给子组件一个可以修改父组件的方法,当子组件需要修改父组件的数据时,通过this.props 找到这个方法执行对应的方法就可以了