React的组件及渲染

组件

• 组件的定义

1. 使用函数定义一个组件，组件名必须大写

function HelloMessage(props) {
    return <h1>Hello {props.name}!</h1>;
}

2. 使用ES6 class定义一个组件

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!</h1>;
  }
}

3. 自定义组件

const element = <HelloMessage name="hello" />

• 通过ReactDOM.render() 的方法来将React元素渲染到页面上：
• 自定义组件中的name属性通过props.name来获取
• 在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor，这是因为 class 和 for 是 JavaScript 的保留字。

---

渲染

• 基本渲染
  将变量的值直接显示在页面上

function MyCom(props){
    let msg = "hello";
    return <h3>{msg}</h3>;
}

• 列表渲染
  设置key属性确定唯一标识

<ul>
    {
        arr.map((item,index)=>{
            return <li key={index}>{item}</li>
        })
    }
</ul>

• 条件渲染

function UserInfo(props){
    let {user} = props;
    if(user){
        return <h2>{user.name} 已登录</h2>
    }
    return <h2>请登录</h2>
}
ReactDOM.render(<UserInfo user={{name:'zhangsan'}}/>,document.getElementById('app'));

---

组件传值

传递字符串需要将字符串直接作为属性值进行传递，如果是要传递其他数据类型，需要将值放入到{}中进行传递

1. 传递字符串
   <MyComponent foo='this is foo' />=>this is foo
2. 传递数字
   <MyComponent foo={1,2,3} />=>3
3. 传递布尔类型
   <MyComponent foo={true} />不显示
4. 传递数组
   <MyComponent foo={[1,2,3,4]} />=>1234
5. 传递对象
   <MyComponent foo={{name: 'terry' }} />=>terry

---

类组件

可以通过ES6中的类来创建组件，该类继承React.Component，并且拥有一个render()函数
render函数表示渲染，每次重新渲染都要调用该函数

class Welcome extends React.Component {
  render() {
    return <h1>Hello World!{this.props.name}</h1>;
  }
}

---

Fragment

Fragment 允许将子列表分组，而无需向 DOM 添加额外节点。

return (
    <React.Fragment>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
    </React.Fragment>
);