React Learn Note 4

React学习笔记（四）

标签（空格分隔）： React JavaScript

---

三、组件&Props

组件可以将UI切分成一些独立的、可复用的部件，这样你就只需专注于构建每一个单独的部件。

组件接收props，返回react元素。

1. 函数定义\类定义组件

最简单组件方式 - 函数定义组件：

// 函数定义组件function Welcome(props) {    return 
Hello, {props.name}!
;}

ES6 class定义组件，效果同上：

// ES6 class定义组件class Welcome extends React.Component {    render() {        return 
Hello, {this.props.name}!
;    }}

2. 组件渲染

将组件作为React元素，标签的属性作为props键值：

const element5_1 = 
    ;ReactDOM.render(    element5_1,    document.getElementById('root5'));

警告:

组件名称必须大写字母开头。

3. 组合组件

React组件也可以嵌套。

function App() {    return (        
    
            
                 
                 
             
    
    );}ReactDOM.render(    
    ,    document.getElementById('root6'));

警告:

组件的返回值只能有一个根元素。所以将多个Welcome元素用div包裹。

4. 提取组件

可以将组件切分为更小的组件。

function formatDate(date) {    return date.toLocaleTimeString();}function Comment(props) {    return (      
    
          
     
              
                    
      
                         {props.author.name}              
      
          
     
          
     
                    {props.text}          
     
          
     
                    {formatDate(props.date)}          
     
      
    
    );}ReactDOM.render(    
    ,    document.getElementById('root7'));

这个组件接收author(对象)、text(字符串)、以及date(Date对象)作为props。是个复杂的组件。接下来我们提取拆分这个组件。

首先提取Avatar组件：

// 提取组件function Avatar(props) {    return (            );}function UserInfo(props) {    return (        
    
            
                 
     
                      {props.user.name}            
     
        
    
    );}// 最终Comment组件被简化为function Comment2(props) {    return (        
    
            
                 
     
                      {props.text}            
     
            
     
                      {formatDate(props.date)}            
     
        
    
    );}ReactDOM.render(    
    ,    document.getElementById('root8'));

5. Props的只读性

无论是使用函数或是类来声明一个组件，它决不能修改它自己的props。

The end...    Last updated by: Jehorn, Jan 07, 2018, 5:44 PM