状态管理-函数式组件

function component

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

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

function User(props){
    return (
        
 Username:{props.username}
        )
}

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

模板字符串

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

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

无状态函数

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

class ListContacts extends Component{
    render(){


        return (
            

                {this.props.contacts.map((contact)=>(
                    

                        


                        

                            
{ contact.name } 
                            
{ contact.email } 
                        
                        
                            remove
                        
                    
                ))}
            
        )
    }
}
export default ListContacts

function ListContacts(props) {

    return (
            

                {props.contacts.map((contact)=>(
                    

                        


                        

                            
{ contact.name } 
                            
{ contact.email } 
                        
                        
                            remove
                        
                    
                ))}
            
        )
}

export default ListContacts

无状态函数式组件总结

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

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

class Email extends React.Component {
  render() {
    return (
      

        {this.props.text}
      
    );
  }
};
const Email = (props) => (
  

    {props.text}
  
);

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

深入研究

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