疫情在家闲无事，不如学习一门成熟框架（react），自我心得。

首先要明确几件事情：

1. 本文章只适合小白， 大佬误喷
2. 要有必定的，html js es6 基础。 最好也是会有es8 的基础。可是本篇文章不会讲到es8
3. 跟着本文学习，最简单的学会react，年后找工做不是事情
复制代码

搭建项目结构

首先须要装有node环境， 没有装的自行百度。

这里使用react 官方给出的create-react-app 脚手架，这一款脚手架是官方一直在维护的，小白放心使用。 脚手架安装的时候，会把一些必要的的包安装进来， 好比说react react-dom等

// 这里在cmd命令行中安装 create-react-app 
 npm install create-react-app
 
 // 安装完以后就能够建立了
  create-react-app myapp
  这样子第一个项目就建立完成了。 
复制代码

建立完成以后项目结构是这样子的。

node_modules  这个文件夹中装的都是一些的第三方包
public 这李装载着入口文件等 
src 这里就是咱们要写入和改的文件夹
package.json 这个是配置文件  
复制代码

剩下的文件都不须要去理会， 重点讲解一下 src 下的 index.js 文件。 首先把代码贴上来。

import React from 'react';         // 这个脚手架安装的时候就已经安装了
import ReactDOM from 'react-dom';  // 这个脚手架安装的时候就已经安装了 
import './index.css';  // 全局的css 样式文件
import App from './App';  // 显示的内容
import * as serviceWorker from './serviceWorker';  // 这个就是优化 学习能够不须要， 删除掉就能够了。

ReactDOM.render(<App />, document.getElementById('root')); // 这个就是把 引入的文件渲染到指定的位置。 // 下边这一句那就是一个优化的过程 serviceWorker.unregister(); 复制代码

下边看上边引入的App 文件里边是什么

import React , {Component } from 'react';  // 每个组件都须要引入 应为须要编译
import logo from './logo.svg';  
import './App.css';  // 样式 应为直接写在当前文件中经过react写法过于麻烦


// 不建议写 初学者不建议写函数形式， 应为这个涉及到了另外一个技术点， 这里直接跳过说class的写法
function App() {
  return (
    <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <p> Edit <code>src/App.js</code> and save to reload. </p> <a className="App-link" href="https://reactjs.org" target="_blank" rel="noopener noreferrer" > Learn React </a> </header> </div> ); } // 这里是继承与 react 中的Componets类的方法 class App extends Component { // render 函数是继承与react中的Componets类的方法 须要抛出一个jsx语法的内容， 这个语法须要有根标签，一般都用 div render (){ return ( <div>你好react</div> ) } } export default App; 复制代码

改完以后保存组件，在当前项目的根组件运行命令行 执行 npm run start react默认 会自动打开浏览器

这里说一下什么是jsx

jsx 也是一种js 的语法， 你能够通俗的理解为在js中写html

写class类时中的标签，写类明的时候， 不要写 这样子写是不对的 应该写成 <div className="App"></div>  
应为react已经占用这个关键字， 全部react给类名的class 改成 className=“”
复制代码

至于说为何要继承react中的Component 这就是下边要讲的。

react 中的Component

在你使用 react 用class类写组建的时候，须要有render 函数来返回jsx 语法。 首先class 类是没有这个方法的，全部react写了这个Component类， Component类中有不少方法。 剩下的后边会说道

react如何像vue等框架同样，动态的改变数据， 拿到数据。

在vue中是定义到 data函数中而后return出去

在react中是定义到constructor中

vue 中使用双括号来表示当前的这个位置的数据是动态的。 而react是使用{} 单括号来表示当前括号中的数据是动态的

// 首先先介绍一点react的生命周期函数 
import React , {Component } from 'react';
import './App.css';  

class App extends Component {

    // constructor 函数是最早执行的全部也是在这个函数中去把数据注册给当前calss类
     // 此函数只会执行一遍
    constructor(props){
        super(props) // 这是里是注册父组件传递过来的参数
        this.state = {
            Totolist:[
                {name:'张三' , age：20},
                {name:'李四' , age：21},
                {name:'王五' , age：22},
                {name:'马大哈' , age：23}
              ]
        }
        conosle.log('constructor')
    }
    
    // componentWillMount函数都是在constructor执行完毕以后执行，也就是在render函数以前
    // 此函数只会执行一遍
    componentWillMount(){
         conosle.log('componentWillMount')
    }
    
    // 而render 函数则不同， 每一次跟新以后都回从新执行
    render (){
        // 当你写全部步骤以后看这里
        
        // 这里就是把Totolist从state中解析出来。这里使用了es6的语法
        // 使用const 应为const 声明的数据首先不能被直接改变数据地址。 react也是不支持直接改变 state 中的数据， 直接改变也是引不起ui界面的变化。
        const { Totolist } = this.state; 
        
        const list = Totolist.map((item, index) => {
            return(
                // 这里和上边讲的jsx 语法同样。 可是须要注意一点， 为了react更方便的找到当前循环出来的数据，要定义key 
                <div key={index}> 
                    <div>我叫{item.name}</div>
                    <div>今年{item.age}岁</div>
                </div>
            )
        })
        return (
            <div>{list}</div>
        )
    }
    // componentDidMount函数都是在render执行完以后再去执行因此在这个函数中操做，数据，发送请求等
    // 此函数只会执行一遍
    componentDidMount(){
         conosle.log('componentDidMount')
    }
}
export default App;

复制代码

怎么动态修改数据

在vue中是直接 this.数据 = 修改以后的数据。 而react中须要借助一个函数，这个函数来源于Component类。 setState见下边示例

// 首先先介绍一点react的生命周期函数 
import React , {Component } from 'react';
import './App.css';  

class App extends Component {

    // constructor 函数是最早执行的全部也是在这个函数中去把数据注册给当前calss类
    constructor(props){
        super(props) // 这是里是注册父组件传递过来的参数
        this.state = {
            Totolist:[]
        }
    }
    // 这里为何要写箭头函数应为箭头函数中的this是继承与父元素的。 
    // 若是写普通的函数就须要在一上来执行当前class类的时候就要改变普通函数的指向，也就是在constructor中
    clickTap = (e) =>{
        let { index } = e.currentTarget.dataset; // 解构出自定义属性
        let { Totolist } = this.state;
        
        // 这里那就是修改看出来就能够了，应为没有什么实际操做的场景
        // 若是直接改变的话，react是捕捉不到数据流的改变，从而没法跟新ui界面
        Totolist[index].name = '暂无'
        this.setState({
            Totolist
        })
    }
    
    render (){
        const { Totolist } = this.state; 
        const list = Totolist.map((item, index) => {
            return(
                // onClick 是react中的click 事件， 和原生中同样不过on  
                // 后边的首字母都是须要大写 
                //  onClick={this.clickTap} 后边的大括号的this是指class类 来获取到clickTap函数
                <div key={index}
                 onClick={this.clickTap} 
                data-index={index}
                > 
                    <div  >
                    我叫{item.name}
                    </div>
                    <div>今年{item.age}岁</div>
                </div>
            )
        })
        return (
            <div>{list}</div>
        )
    }
    
    componentDidMount(){
        // 上边我定义了一个空数组而后模拟请求数据
        setTimeout(() =>{
            this.setState({
               Totolist  = [
                 {name:'张三' , age：20},
                {name:'李四' , age：21},
                {name:'王五' , age：22},
                {name:'马大哈' , age：23}]
            })
        } , 2000)
    }
}
export default App;

复制代码

总结

react中的事件必须以on开头 并且功能后边的首字母要大写

react中使用动态数据，则须要使用{数据} 大括号的形式来使用

react 中的class类明则须要改为className

注册state 则须要在 constructor中注册，应为constructor是一上来第一个执行的

搞清楚1.constructor , 2.componentWillMount , 3. render , 4.componentDidMount ,这四个函数都是 依次执行 。 除了render 函数以外的三个函数，都是执行一次，render 函数是每一次数据改变都会从新执行render函数