react定义组件两种方式，及渲染

函数定义/类定义组件

import React, { Component } from 'react';
// import img01 from './images/01.png'
import './App.css';

class App extends Component {
  
 
  render() {
    function Welcome(props){
      return <h1>hello ,{props.name}</h1>
    }
    
    class Welcome2 extends React.Component{
      render(){
        return <h2>hello,{this.props.name}</h2>
      }
    } 

    return (
      <div className="App">
        <Welcome name='lily'/>
        <Welcome2  name='luly'/>  
      </div>
    );
  }
}

export default App;

 

该函数是一个有效的React组件，它接收一个单一的“props”对象并返回了一个React元素。我们之所以称这种类型的组件为函数定义组件，是因为从字面上来看，它就是一个JavaScript函数。

你也可以使用 ES6 class 来定义一个组件

组件渲染

在前面，我们遇到的React元素都只是DOM标签：

const element = <div />;

然而，React元素也可以是用户自定义的组件

const element = <Welcome name="Sara" />;

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。

这个例子中发生了什么：

1. 我们对<Welcome name="Sara" />元素调用了ReactDOM.render()方法。
2. React将{name: 'Sara'}作为props传入并调用Welcome组件。
3. Welcome组件将<h1>Hello, Sara</h1>元素作为结果返回。
4. React DOM将DOM更新为<h1>Hello, Sara</h1>。

警告:

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

例如，<div /> 表示一个DOM标签，但 <Welcome /> 表示一个组件，并且在使用该组件时你必须定义或引入它。