React学习总结1--元素与组件

demos源码

JSX与react元素

const element = <h1>Hello, world!</h1>;

它被称为 JSX，是一个 JavaScript 的语法扩展。JSX 可以生成 React “元素”。实际react元素就是javascript对象，jsx返回的就是javascript对象。

Babel会把jsx转译成React.createElement()函数调用。
babel测试地址

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);
//编译后：
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

最终创建了一个类似这样的对象:

// 注意：这是简化过的结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

这些对象就被称为'react元素'。元素是构成react应用的最小砖块，而组件又是由元素构成的。

组件

组件又分为：

• 函数组件
• class组件

// 函数组件
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 类组件
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

函数组件与类组件有什么不同呢？

1. 函数组件写法简洁，接收外部传入的props，返回对应的ui
2. 类组件可以使用生命周期函数，维护自身状态（state）

其实函数组件还可以称为无状态组件。
什么是无状态组件呢？无状态组件内部不使用state，只根据外部组件传入的props返回待渲染的react 元素。有状态组件则是根据自身的state以及外部的props来共同决定返回的react元素。如此定义的话，类组件则既可以充当无状态组件，也可以充当有状态组件。