function component

class User extends React.Component{
    render(){
        return (
            <p> Username:{this.props.username}</p>
            )
    }
}

// 等价于下面的函数式组件

function User(props){
    return (
        <p> Username:{props.username}</p>
        )
}

//这种情况下，不用this关键字，props 做为参数传递给函数式组件 

模板字符串

在 "style" 属性的值中使用反引号 ()。这些[模板字符串](可以用于嵌入表达式。借助模板字符串，你可以通过你的应用将表达式当做普通字符串进行插入。

用看待参数与函数的关系来看待props与组件的关系

无状态函数

如果组件中只有render方法，可以不用类的方式创建组件，而是作为一个普通的函数就可以了。此函数接收一个props参数后返回一些UI
下面的函数改为无状态函数

class ListContacts extends Component{
    render(){


        return (
            <ol className="contact-list">
                {this.props.contacts.map((contact)=>(
                    <li key={contact.id} className="contact-list-item">
                        <div className ="contact-avatar" style={{
                            backgroundImage:`url(${contact.avatarURL})`
                        }}/>

                        <div className='contact-details'>
                            <p>{ contact.name } </p>
                            <p>{ contact.email } </p>
                        </div>
                        <button className="contact-remove">
                            remove
                        </button>
                    </li>
                ))}
            </ol>
        )
    }
}
export default ListContacts

function ListContacts(props) {

    return (
            <ol className="contact-list">
                {props.contacts.map((contact)=>(
                    <li key={contact.id} className="contact-list-item">
                        <div className ="contact-avatar" style={{
                            backgroundImage:`url(${contact.avatarURL})`
                        }}/>

                        <div className='contact-details'>
                            <p>{ contact.name } </p>
                            <p>{ contact.email } </p>
                        </div>
                        <button className="contact-remove">
                            remove
                        </button>
                    </li>
                ))}
            </ol>
        )
}

export default ListContacts

无状态函数式组件总结

如果组件不用跟踪内部状态（即它只有 render() 方法），你可以将该组件声明为无状态函数式组件。

最终，React 组件只是返回要渲染的 HTML 的 JavaScript 函数。因此，下面的两个简单电子邮件组件示例是同等的：

class Email extends React.Component {
  render() {
    return (
      <div>
        {this.props.text}
      </div>
    );
  }
};
const Email = (props) => (
  <div>
    {props.text}
  </div>
);

在第二个示例（具有隐式返回的 ES6 函数）中，我们可以将属性当做参数直接传入函数本身，而不是通过 this.props 访问 props。反过来，这个普通的 JavaScript 函数可以充当 Email 组件的 render() 方法。

深入研究

• 创建无状态函数式组件 React 教科书
• 函数式组件与无状态函数式组件与无状态组件（作者 Tyler）