珠峰培训，专注前端

一、受控组件

1.1 什么是受控组件？

受控组件：在 html 中，input、textarea、select 这种表单元素，这些元素可以根据用户的输入变更自身的状态（数据）；而 React 中的可变状态放在 state 中，我们把两者结合起来，让 React 的 state 成为单一数据来源，这样的组件称为受控组件

说白了就是 表单元素的 value 绑定 state 里面的属性，然后当表单的 value 发生变化时更新 state 里面的数据，即受控组件就是受 state 控制的组件

React 是单向数据流，需要使用受控组件的方式来实现双向数据绑定

1.2 示例

  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  5. class Input extends Component {
  6.   constructor () {
  7.     super()
  9.     this.state = {
  10.       val: 100
  11.     }
  12.   }
  14.   changeVal = (e) => {
  15.     // 事件函数中的 e 是事件源，获取 input 的 value
  16.     this.setState({
  17.       val: e.target.value
  18.     })
  19.   }
  21.   render () {
  22.     return (<div>
  23.       <input type="text" value={this.state.val} onChange={this.changeVal}/>
  24.       <p>{this.state.val}</p>
  25.     </div>)
  26.   }
  27. }
  29. ReactDOM.render(<Input />, document.querySelector('#root'))

二、非受控组件

2.1 什么是非受控组件？

非受控组件：不受 React 的状态控制的组件；受控组件的 value 存在 state 中，如果想获取从 state 当中获取就可以了；而非受控组件的 value 存在 DOM 元素上，此时需要使用 ref 获取表单元素的值。

2.2 ref

ref 是 React 提供的用来操作 DOM 的；使用 ref 需要创建 ref，然后在需要被获取的 DOM 对象上使用 ref 即可

  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  3. class Sum extends Component {
  4.   constructor () {
  5.     super()
  7.     this.state = {
  8.       num: 0
  9.     }
  11.     this.myRefA = React.createRef() // 创建 ref，在构造函数中创建 ref
  12.     // this.myRefB = React.createRef()
  13.   }
  15.   changeState = () => {
  16.     // 使用 ref ：当组件挂载后，通过 ref 属性的 current 属性访问该 DOM 元素
  17.     // this.myRefA.current 就是 第一个 input
  18.     // this.myRefB.current 就是 第二个 input
  19.     // console.log(this.myRefA.current)
  20.     let num = +this.myRefA.current.value + +this.myRefB.current.value;
  21.     this.setState({
  22.       num
  23.     })
  24.   }
  26.   render () {
  27.     return (<div onChange={this.changeState}>
  28.       {/*在 DOM 元素中使用 ref，ref 的值是上面创建的 ref*/}
  29.       <input type="text" ref={this.myRefA} /> <br/>
  30.       {/*ref 第二种形式，设置一个箭头函数，this.myRefB 就是第二个 input 的 ref，el 就是这个 input，这个函数会在组件挂载后执行，执行后在父组件的 this 上的 myRefB 就是这个 input 元素了*/}
  31.       <input type="text" ref={(el) => {this.myRefB = el} } />
  32.       <p>{this.state.num}</p>
  33.     </div>)
  34.   }
  35. }
  37. ReactDOM.render(<Sum />, document.getElementById('root'))
  • 非受控组件通过 ref 获取 DOM 元素，然后通过 value 属性获取该表单元素的值

三、React 的生命周期

和 Vue 类似，React 的组件也有生命周期；但是只有通过 class 声明的组件才会有生命周期的钩子函数；

学习 React 的生命周期，我们主要学习以下钩子函数；

  • constructor 构造函数
  • componentWillMount 组件将要挂载
  • render 渲染函数
  • componentDidMount 组件已经挂载
  • componentWillReceiveProps 初始化组件不会执行，当父组件数据发生变化，会触发这个钩子
  • shouldComponentUpdate props 或 state 改变是否更新视图，默认更新
  • componentWillUpdate 组件更新前调用
  • componentDidUpdate 组件更新后调用，首次渲染不会执行此方法。
  • componentWillUnmount 组件卸载及销毁之前直接调

示例

  1. import React, { Component } from 'react'
  2. import ReactDOM from 'react-dom'
  4. // 组件：
  5. // 生命周期：生命周期的钩子函数；
  7. class Parent extends Component {
  8.   // constructor 和 render 都是 react 的生命周期的钩子函数
  9.   constructor () {
  10.     super()
  12.     this.state = {
  13.       num: 0
  14.     }
  15.     console.log('constructor')
  16.   }
  18.   componentWillMount () {
  19.     // 组件第一次初始化，将要挂载，执行一次
  20.     console.log('componentWillMount')
  21.   }
  23.   componentDidMount () {
  24.     console.log('componentDidMount')
  25.   }
  27.   shouldComponentUpdate (nextProps, nextState) {
  28.     // 当组件初始化时，不会执行，只有当属性或者 state 发生改变时，才会执行这个函数；
  30.     // nextProps 代表改变之后的 props 对象
  31.     // nextState 代表改变之后的 state 对象
  32.     console.log('shouldComponentUpdata')
  33.     // 如果这个函数返回一个 false ，不会再次调用 render 方法，如果返回一个 true ，那么会继续调用 render ，改变视图
  35.     return nextState.num % 3
  36.   }
  38.   componentWillUpdate () {
  39.     console.log('componentWillUpdate')
  40.   }
  42.   componentDidUpdate () {
  43.     // 只能获取上一次更新的数据
  44.     // render 之后才会执行该方法
  45.     console.log('componentDidUpdate')
  46.   }
  48.   componentWillUnmount () {
  49.     // 当组件销毁执触发该钩子
  50.     // 移除定时器、移除事件监听器
  51.     console.log('componentWillUnmount')
  52.   }
  54.   handleClick = () => this.setState({num: this.state.num + 1})
  56.   render () {
  57.     console.log('render')
  59.     return (<div>
  60.       <p>
  61.         {this.state.num}
  62.       </p>
  63.       <Child n={this.state.num}></Child>
  64.       <button onClick={this.handleClick}>加加</button>
  65.     </div>)
  66.   }
  67. }
  69. // react 中的生命周期的钩子函数执行：defaultProps => constructor => componentWillMount => render => componentDidMount
  71. // state 或 props 改变
  72. // shouldComponentUpdate => componentWillUpdate => render => componentDidUpdate
  74. // 当父组件触发 render 时，才会执行子组件中关于数据更新对应的钩子
  75. class Child extends Component {
  76.   constructor () {
  77.     super()
  78.     console.log(100)
  79.   }
  81.   componentWillMount () {
  82.     console.log(200)
  83.   }
  85.   // 数据更新会触发子组件以下钩子函数：
  86.   // 初始化组件不会执行，当父组件数据发生变化，会触发这个钩子
  87.   componentWillReceiveProps (props) {
  88.     console.log('子组件：componentWillReceiveProps')
  89.   }
  90.   shouldComponentUpdate () {
  91.     console.log('子组件：shouldComponentUpdate')
  92.     return true
  93.   }
  94.   componentWillUpdate () {
  95.     // 当 shouldComponentUpdate 返回 true，才会执行这个函数
  96.     console.log('子组件 componentWillUpdate')
  97.   }
  98.   componentDidUpdate () {
  99.     console.log('子组件 componentDidUpdate')
  100.   }
  102.   render () {
  103.     return (<div>
  104.       {this.props.n}
  105.     </div>)
  106.   }
  107. }
  109. ReactDOM.render(<Parent />, document.getElementById('root'))

四、React 轮播图

本例使用 React 开发一个简单的轮播图；项目结构如下

  1. │  index.css 项目的 css 文件
  2. │  index.js slider 的入口文件
  3. │
  4. ├─components 组件文件
  5. │      Slider.js
  6. │      SliderArrow.js 轮播图的左右箭头
  7. │      SliderDots.js 轮播图的焦点
  8. │      SliderItems.js 单个轮播图项
  9. │
  10. └─images 轮播图使用的图片
  11.         1.jpg
  12.         2.jpg
  13.         3.jpg

index.js

  1. import React from 'react'
  2. import ReactDOM from 'react-dom'
  3. import Slider from './components/Slider'
  4. import './index.css'
  6. async function getImgs () {
  7.   let imgs = await Promise.all(
  8.     [
  9.       import('./images/1.jpg'),
  10.       import('./images/2.jpg'),
  11.       import('./images/3.jpg')
  12.     ]
  13.   )
  15.   return imgs
  16. }
  18. getImgs().then(res => {
  19.   // console.log(res)
  20.   let data = res.map(i => i.default)
  21.   ReactDOM.render(<Slider images={data}/>, document.getElementById('root'))
  22. })

index.css

  1. * {
  2.   margin: 0;
  3.   padding: 0;
  4. }
  6. ul li {
  7.   list-style: none;
  8. }
  10. .container {
  11.   width: 500px;
  12.   height: 300px;
  13.   margin: 10px auto;
  14.   position: relative;
  15.   overflow: hidden;
  16. }
  18. .wrapper {
  19.   width: 1600px;
  20.   height: 300px;
  21.   position: absolute;
  22.   left: 0;
  23. }
  25. .wrapper .slider {
  26.   width: 500px;
  27.   height: 300px;
  28.   float: left;
  29. }
  31. .wrapper .slider img {
  32.   width: 100%;
  33.   height: 100%;
  34. }
  36. .slider-arrow {
  37.   position: absolute;
  38.   width: 100%;
  39.   height: 30px;
  40.   margin-top: -15px;
  41.   top: 50%;
  42. }
  44. .slider-arrow span {
  45.   display: inline-block;
  46.   width: 30px;
  47.   height: 30px;
  48.   line-height: 30px;
  49.   text-align: center;
  50.   background: #eee;
  51.   cursor: pointer;
  52. }
  54. .slider-arrow span.left {
  55.   float: left;
  56. }
  58. .slider-arrow span.right {
  59.   float: right;
  60. }
  62. .slider-dots {
  63.   position: absolute;
  64.   bottom: 10px;
  65.   width: 100%;
  66.   text-align: center;
  67. }
  69. .slider-dots span {
  70.   display: inline-block;
  71.   margin-right: 2px;
  72.   border-radius: 10px;
  73.   width: 20px;
  74.   height: 20px;
  75.   background: #eee;
  76. }
  78. .slider-dots span.active {
  79.   background: green;
  80. }

components/Slider.js

  1. // 负责 把组件都组装在一起使它们称为一个功能
  3. import React, { Component } from 'react'
  5. import SliderItems from './SliderItems'
  6. import SliderArrow from './SliderArrow'
  7. import SliderDots from './SliderDots'
  9. export default class Slider extends Component {
  10.     constructor () {
  11.         super()
  13.         this.state = {
  14.             index: 0
  15.         }
  16.     }
  17.     go = () => {
  18.         this.timer = setInterval(() => {
  19.             this.turn(1)
  20.         }, 2000)
  21.     }
  23.     getUl = (el) => {
  24.         this.ulRef = el
  25.     }
  27.     turn = (step) => {
  28.         let index = this.state.index + step
  29.         if (index > this.props.images.length) {
  30.             // 越界：瞬间回到
  31.             this.ulRef.style.left = 0
  32.             this.ulRef.style.transitionDuration = '0s' // 清除动画
  33.             setTimeout(() => {
  34.                 this.ulRef.style.transitionDuration = '0.5s'
  35.                 index = 1
  36.                 this.setState({index})
  37.             }, 0)
  38.             return // 因为设置了setTimeout 所以需要等待 setTimeout 后再设置最后状态
  39.         }
  40.         if (index < 0) {
  41.             this.ulRef.style.left = -1 * this.props.images.length * 500 + 'px'
  42.             this.ulRef.style.transitionDuration = '0s' // 清除动画
  43.             setTimeout(() => {
  44.                 this.ulRef.style.transitionDuration = '0.5s'
  45.                 index = this.props.images.length - 1
  46.                 this.setState({index})
  47.             }, 0)
  48.             return
  49.         }
  50.         this.setState({
  51.             index
  52.         })
  53.     }
  55.     stop = () => {
  56.         window.clearInterval(this.timer)
  57.     }
  58.     componentDidMount () {
  59.         this.go()
  60.     }
  61.   render () {
  62.       return (<div className="container" onMouseOver={this.stop} onMouseOut={this.go}>
  63.           <SliderItems images={this.props.images} index={this.state.index} getUlRef={this.getUl} />
  64.           <SliderArrow turn={this.turn} />
  65.           <SliderDots images={this.props.images} index={this.state.index} turn={this.turn} />
  66.       </div>)
  67.   }
  68. }

/components/SliderArrow.js

  1. import React, { Component } from 'react'
  3. export default class SliderArrow extends Component {
  4.   render () {
  5.     return ( <div className="slider-arrow">
  6.       <span className="left" onClick={() => this.props.turn(-1)}>&lt;</span>
  7.       <span className="right" onClick={() => this.props.turn(1)}>&gt;</span>
  8.     </div>)
  9.   }
  10. }

/components/SliderDots.js

  1. import React, { Component } from 'react'
  3. export default class SliderDots extends Component {
  4.   render () {
  5.       // 轮播图下的焦点，需要根据当前轮播图正在展示的图片，给对应索引索引的小点增加选中样式，所以小点也需要 索引，此时 SliderDots 和 SliderItems 都需要 索引，所以应该使用把索引提升
  6.       let { props: { images } } = this
  7.       let cpImg = images.slice(0, 3)
  8.     return (<div className="slider-dots">
  9.         {
  10.             images.map((item, index) => {
  11.                 if (index === 0 && this.props.index === images.length) {
  12.                     return <span className={'active'} key={index} onClick={(e) => this.props.turn(index - this.props.index)}></span>
  13.                 } else {
  14.                     return <span className={index === this.props.index ? 'active' : '' } key={index} onClick={(e) => this.props.turn(index - this.props.index)}></span>
  15.                 }
  16.             })
  17.         }
  18.     </div>)
  19.   }
  20. }

/components/SliderItem.js

  1. import React, { Component } from 'react'
  3. export default class SliderItems extends Component {
  4.     constructor (props) {
  5.         super()
  6.     }
  7.   render () {
  8.         // 轮播图就是根据当前 container 要展示的 图片的索引，移动 wrapper，所以 wrapper 需要当前要展示图片的索引
  9.       // 根据当前轮播图展示图片的索引动态计算 wrapper 的 left 值
  11.       let style;
  12.       let { props: { index } } = this
  14.       style = {
  15.           left: -1 * index * 500 + 'px',
  16.           transition: 'all .5s linear 0s'
  17.       }
  19.       return (<ul className="wrapper" style={style} ref={this.props.getUlRef}>
  20.           {
  21.               this.props.images.map((item, index) => {
  22.                   return (<li className="slider" key={index}>
  23.                       <img src={item} alt=""/>
  24.                   </li>)
  25.               })
  26.           }
  27.           <li className="slider">
  28.               <img src={this.props.images[0]} alt=""/>
  29.           </li>)
  30.       </ul>)
  31.   }
  32. }
  33. }

【发上等愿，结中等缘，享下等福，择高处立，寻平处住，向宽处行】