React组件的两种写法

constructor (props) {
  super(props)
}

function User (props) {
  console.log(props)
  let name = '自定义的字段'
  const numbers = props.numbers
  const listItems = numbers.map((x,index) =>
    <li key={index}>{x}</li>
  )

  const outerName = props.outerName
  return (
    <div className="User">
      <ul>
        <li>{name}</li>
        <li>父级元素传输的{outerName}</li>
        {listItems}
      </ul>
    </div>
  )
}
export default User;

import React, {Component} from 'react'

class User extends Component {
  constructor(props) {
    super(props);
    this.state = {
      name: '自定义字段',
      arr:[11,21,34],
      listItems: null
    };
  }
  render () {
    return (
      <div>
        {this.state.name}
        <ul>
          {
            this.props.numbers.map(item => (
              <li key={item}>{item}</li>
            ))
          }
        </ul>
      </div>
    )
  }
}
export default User