react是什么？

react 这是一个声明式，高效且灵活地用于构建用户界面的 JavaScript 库。使用 react 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”。

react特点

1.声明式设计：创建交互式UI更简单。

2.组件化：构建具有自身状态的组件，灵活组成复杂UI。

3.高效：虚拟DOM节点，减少DOM元素交互。

4.灵活：自由融合其他技术栈。

JSX语法

react框架推荐使用JSX语法编程。JSX 是一个看起来很像 XML 的 JavaScript 语法扩展，直接在HTML中使用js语法。无法被浏览器识别，需要使用webpack将JSX解析成js语法。我们不需要一定使用 JSX，但它有以下优点：

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

import React from "react";

class Test extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        function getName(user){
            return user.name;
        }
        const user = {
            name: 'jack',
            age: 18
        }

        return(
            <div>
                <h1>hello {getName(user)}</h1>
            </div>
        )
    }

}
export  default Test

组件

1.有状态组件

有状态组件又被称为容器组件或者聪明组件，它主要用来处理数据或者页面逻辑交互。它比无状态功能更加强大。类组件可以维护自身的状态变量，即组件的state。

class Test extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            name: 'jack',
            age: 18
        }
    }
    render() {
        return(
            <div>
                <h1>hello { this.state.name }</h1>
            </div>
        )
    }

}
export  default Test

2.无状态组件

无状态组件又称变现性组件或者木偶组件，为何叫木偶组件？因为它只关心数据传递props，只能访问输入的 props，同样的 props 会得到同样的渲染结果，不会有副作用。而且没有自己的state。

import React from "react";

const Componment = (props) => {
    return(
        <div>
            hello {props.user.name}
        </div>
    )
}

export default Componment

import React from "react";
import Componment from "./Test2";


class Test extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        function getName(user){
            return user.name;
        }
        const user = {
            name: 'jack',
            age: 18
        }
        return(
            <div>
                <Componment user={user}/>
            </div>
        )
    }

}
export  default Test