React基本概念 | 易学教程

react起源于Facebook的内部项目（2013年5月开源）

1.特点：

①声明式设计：直接有返回值；

②高效；

③灵活；

④JSX*：是js语法的扩展，可以在js文件中书写html结构；

⑤单向响应的数据流：要改变state中的数据时，需要手动的使页面更新（利用this.setState，后面会介绍他的用法）

⑥组件：react中一切皆为组件

之前的node.js是MVC框架，而Vue是MVVM框架（其实，如果没有Vuex那么Vue只是一个MV框架），而React则是一个不完整的MVC/MVVM框架；

react中利用函数化/式编程：也就是说输入一个值，输出的结果是特定的；

安装：cnpm install react react-dom -S（其中react用来书写jsx语法，react-dom用来解析jsx语法也就是渲染）

import React from 'react';
import ReactDOM from 'react-dom';
import {HashRouter as Router ,Route} from "react-router-dom"

ReactDOM.render(

        <Router>
             <Route path="/" component={App} /> 
        </Router>
      
     document.getElementById('root'),
    () => {
        console.log("成功")
    });

既然说react中一切皆为组件，那么我们需要写的页面其实也是组件（.js文件），那如何创建一个组件呢

在react中一般通过class类的方式来创建一个组件：class 组件名 extends React.Component{} //(这里的React是import React from 'react')

在组件内部必须有一个render函数*（他也是react的一个生命周期），并且其内部要返回一个jsx语法；注：一般常见的jsx语法中的input中的value属性需要书写成defaultValue或者给该元素绑定一个onChange事件（这里也说明了在react中绑定事件用事件名进行绑定on后的第一个字母大写：onClick={this.handle.bind(this)}，这里可以涉及到一个事件绑定的性能优化）

来源：https://www.cnblogs.com/cqdd/p/11427226.html

标签

react

jsx