React基础

1、React组件

组件的概念

React 应用都是构建在组件之上。

组件作为React的核心内容，是View的重要组成部分，每一个View页面都由一个或多个组件构成，可以说组件是React应用程序的基石。在React的组件构成中，按照状态来分可以分为有状态组件和无状态组件。

1.1、函数组件

无状态函数式组件形式上表现为一个只带有一个 render() 方法的组件类，通过函数形式或者 ES6 箭头 function的形式在创建，并且该组件是无state状态的。具体的创建形式如下

import React from 'react';

//定义一个React组件
function App() {
   
  return (
    <div>
      hello React...
    </div>
  );
}

export default App;

1.2、类组件

React.Component 是以 ES6 的形式来创建react的组件的，是React目前极为推荐的创建有状态组件的方式，形式改为 React.Component 形式如下

import React from 'react';

//定义一个React组件
class App extends React.Component{
   
  render(){
   
    return (
      <div>
        Hello，Reactjs！！
      </div>
    );
  }
}

export default App;

在其他文件中引用组件

import React from 'react';
import ReactDOM from 'react-dom';
//App组件，组件要求大写字母开头
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

1.3、函数组件和class组件的区别

用构造函数创建出来的组件，叫做“无状态组件”；

用class关键字创建出来的组件，叫做“有状态组件”；

有状态组件和无状态组件之间的本质区别是有无state属性。

注意：

使用class 关键字创建的组件，有自己的私有数据（this.state）和生命周期函数；

使用function创建的组件，只有props，没有自己的私有数据和生命周期函数；

函数组件和类组件当然是有区别的，而且函数组件的性能比类组件的性能要高，因为类组件使用的时候要实例化，而函数组件直接执行函数取返回结果即可。为了提高性能，尽量使用函数组件

区别	函数组件	class组件
是否有 this	没有	有
是否有生命周期	没有	有
是否有状态 state	没有	有

2、JSX语法

React 使用 JSX 来替代常规的JavaScript。

JSX 是按照 XML 语法规范 的 JavaScript 语法扩展。

JSX 有以下优点：

• JSX 执行更快，因为它在编译为 JavaScript 代码后进行了优化；
• 它是类型安全的，在编译过程中就能发现错误；
• 使用 JSX 编写模板更加简单快速。

**JSX 语法的本质：**并不是直接把 JSX 渲染到页面上，而是内部先转换成了 createElement 形式，再渲染的。

**JSX 注释：**推荐使用 {/* 这是注释 */}；

**JSX中添加class类名：**需要使用 className 来替代 class ；htmlFor 替代 label 的 for 属性；

在JSX创建DOM的时候，所有节点必须有唯一的根元素进行包裹；

在JSX语法中，标签必须成对出现，如果是单标签，则必须自闭和；

代码示例：

const mydiv = <div>这是一个Div标签</div>;
ReactDOM.render(mydiv, document.getElementById('root'));

使用组件化开发代码示例：

App.js 组件文件代码

import React from 'react';

class App extends React.Component{
   
  render(){
   
    return (
      <div>
        {
   1+1}
        <hr