React组件的两种写法

ES5函数组件方式

// 使用一个函数来定义组件，参数为props(父级传入的参数)返回的是个React元素，本质上就是JavaScript函数

function Student(props) {
  console.info(props)
  let someThing = '自定义的字段，可以在return中被引用'

  // name、books为Student的属性，举例:
  // <Student name="小明" books={ ['穿书自救指南','我叫白小飞','西游记'] }/>
  const name = props.name
  const books = props.books
  const bookItems = books.map((x,index) =>
    <li key={index}>{x}</li>
  )

  const outerName = props.outerName
  return (
    <div>
      <ul>
        <li>{someThing}</li>
	<li>父级元素传输的{name}</li>
        <li>父级元素传输的{outerName}</li>
        {bookItems}
      </ul>
    </div>
  )
}
export default Student;

ES6的Class组件方式

// 使用构造器子类继承父类的props
// constructor(props) {
//    super(props);
//}

import React, {Component} from 'react'
 
class Student extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '自定义的字段, 可以在return中被引用',
      books: ['穿书自救指南','我叫白小飞','西游记'],
      bookItems: null
    };
  }
  render () {
    return (
      <div>
        {this.state.name}
        <ul>
          {
            // html元素内'{ }'包裹的内容表示这里是JavaScript表达式
            // 这里的books是从父元素传递进来的属性
            this.props.books.map(item => (
              <li key={item}>{item}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}
export default User