React中函数组件和类组件

一、函数组件的使用方法

1）为了区分普通函数还是组件，通过组件函数的名字，使用 PascalCase命名方式，其他函数使用camelCase命名方式。

2）组件函数必须有返回值，返回组件呈现的最终效果

 function Greeting() {
        return <h1>hello world</h1>;
      }

3）渲染组件和vue一样，类似使用html标签一样（例如<Greeting />)

//注：渲染组件可以用单标签或双标签（但是都需要闭合，而且如果其中有内容，只能用双标签）

即<Greeting />和<Greeting></Greeting>等价

var ele = <Greeting />;

4）最后，将元素渲染到指定的dom对象下（ReactDom.render();方法)

ReactDOM.render(ele, document.getElementById('root'));

二、函数组件的参数传递 （利用props）

1.在渲染组件时，会将所有绑定的属性 解析出来，并存储在一个object对象上，之后调用组件函数时，上面得到的对象会作为参数传入进去（例：如下代码

<Greeting name="大侠" />

 就会把name='大侠'放入一个对象中，传递给Greeting函数组件。）

注：这里地参数可以用驼峰命名

2.所有由第一条我们就可以在定义函数组件的时候，在函数组件设立一个参数props,即

 function Greeting(props) {
          console.log(props);
          return <h1>Hello, {props.name}</h1>;
      }

其中props就是 组件在渲染时绑定地所有属性，组件中props 是 只读。不能修改Props属性值，实际上可以修改，但是自己强制要求不能修改

三、类组件的使用方法

1).类组件  通过class创建组件

注意：1.必须继承 React.Component类

class Greeting extends React.Component{}

 2..必须实现render方法 在render方法中返回最终的呈现效果

class Greeting extends React.Component{
    render(){
             return <h1>hello world </h1>;
               }

       }

2).将元素渲染到指定的dom对象下（ReactDom.render();方法)

ReactDom.render(<Greeting />,document.getElementById('root'));

即可实现简单的类组件

四、类组件的参数传递

1.在渲染组件时，会将所有绑定的属性 解析出来，并存储在一个object对象上，object对象返回传递给类组件的类的实例对象上的props属性上（例：如下代码

<Greeting name='大侠'/>

）

2.在上边的定义类组件利用this接收属性

class Greeting extends React.Component{
    render(){
             return <h1>hello {this.props.name} </h1>;
               }

       }

3.为了以后方便使用this，利用Es6的构造器

class Greeting extends React.Component{
    constructor(props){
        super(props);
    };
render() {
    return <h1>hello {this.props.name}</h1>;
    
}

五、函数组件和类组件的比较

1.函数组件在渲染时不会创建组件实例，因此性能更优

2.类组件 在渲染时会创建组件实例 可具有状态以及生命周期等特性

3.实际开发如果不需要状态或生命周期的话，建议使用函数组件，反之建议使用类组件