本節(jié)知識(shí)點(diǎn)

(1) props驗(yàn)證
(2) defaultProps 默認(rèn)屬性

Props驗(yàn)證

props 驗(yàn)證必須要引入props
import PropTypes from 'prop-types';
然后在組件即將暴露之前寫驗(yàn)證規(guī)則
list.propTypes = {
  content: PropTypes.string, // 類型是字符串
  deletedate: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), //類型是方法或者數(shù)字
  index: PropTypes.number.isRequired // 類型是number 而且必須是必填的
}
// 默認(rèn)數(shù)據(jù)
list.defaultProps = {
  test: 'Hello.world'
}

全部代碼

import React, { Component } from 'react'
import PropTypes from 'prop-types';
class list extends Component {
  constructor(props) {
    super(props)
    this.state = {}
  }
  render() {
    return <div onClick={this.deleteone.bind(this)}>{this.props.content}</div>
  }
  deleteone() {
    let value = this.props.index
    console.log(value)
    this.props.deletedate(value)
  }
}
list.propTypes = {
  content: PropTypes.string, // 類型是字符串
  deletedate: PropTypes.oneOfType([PropTypes.func, PropTypes.number]), //類型是方法或者數(shù)字
  index: PropTypes.number.isRequired // 類型是number 而且必須是必填的
}
// 默認(rèn)數(shù)據(jù)
list.defaultProps = {
  test: 'Hello.world'
}
export default list

備注 虛擬節(jié)點(diǎn)問題
虛擬DOM 本質(zhì)上就是一個(gè)js對(duì)象。

['div',{id:'abc'},['span',{class:"haha"}]]

這樣生成一個(gè)虛擬DOM比元素要提高性能