码迷,mamicode.com
首页 > 其他好文 > 详细

React.Component 和 funtion 组件的区别

时间:2020-03-17 08:31:55      阅读:60      评论:0      收藏:0      [点我收藏+]

标签:button   span   from   收入   you   super   bsp   支持   渲染   

结论:需要根据state进行渲染时,使用React.Component;用不到state时,可以直接写函数组件。

 

Function 函数组件:可以接收入参(props),通过return返回dom结构。

function Hello(props) {
    return <h1>Hello, {props.name}!</h1>;
}
 
ReactDOM.render(
    <Hello name="Jack" />, 
    document.getElementById(‘root‘)
);

 

React.Component 是一个class(类),不止可以接收props,也支持state,还包含了生命周期函数,在render函数内返回dom结构。

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            myname:""
        };
    }

    componentDidMount(){
        this.setState({
            myname:"baby"
        })
    }

    render() {
        return (
            <div>
                <h1>Hello, {this.props.name}!</h1>
                <h1>I am {this.state.myname}</h1>
            </div>
        );
    }
}

ReactDOM.render(
    <Hello name="Jack" />,
    document.getElementById(‘root‘)
);

 

Hook 是React的新特性,通过 useState 和 EffectState 方法,让函数组件也支持了state。

// Hook写法
import React, { useState, useEffect } from ‘react‘;

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

// 对应Class写法
class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  componentDidMount() {
    document.title = `You clicked ${this.state.count} times`;
  }

  componentDidUpdate() {
    document.title = `You clicked ${this.state.count} times`;
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>
          Click me
        </button>
      </div>
    );
  }
}

 

React.Component 和 funtion 组件的区别

标签:button   span   from   收入   you   super   bsp   支持   渲染   

原文地址:https://www.cnblogs.com/yangshifu/p/12508187.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!