一、介绍

React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。

由于 React的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。

官网：

https://react.docschina.org/

1.优点

(1)跨浏览器兼容
(2)一切皆组件
(3)单向数据流动
(4)虚拟DOM，运行速度非常快
(5)JSX语法糖

2.缺点

　　React不是完整的MVC框架，需要结合flux或者redux来开发大型项目

二、起步

1.获取核心库

　　react核心库

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

　　reactDOM核心库

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

2.基本使用

　　示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>起步</title>
    <!-- 引入React核心库 -->
    <script src="./js/react.development.js"></script>
    <!-- 引入ReactDOM核心库 -->
    <script src="./js/react-dom.development.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>
        //通过React核心库创建一个虚拟DOM
        var el = React.createElement("h1",null,"纸上得来终觉浅")
        //通过ReactDOM核心库把虚拟DOM渲染到指定的容器内容
        ReactDOM.render(el,document.getElementById("app"))
    </script>
</body>
</html>

三、jsx语法糖

jsx（Javascript和XML），是FaceBook专门为React框架开发的一套语法糖

jsx是一种js语法的扩展，允许html和js混写

jsx语法糖具有结构清晰、增加js语义、抽象程度高、屏蔽DOM操作、语言跨平台等特点

规律：遇到<解析成html语法，遇到{解析成js语法。

{ } 花括号中，可以写单行js语法，也可以写成一个匿名函数

1.引入babel.js文件

<script src="./js/babel.min.js"></script>

2.设置script标签的type属性

<script type="text/babel"></script>

3.使用jsx语法糖来创建虚拟DOM

var els = <div>
    <h1>纸上得来终觉浅</h1>
    <h2>绝知此事要躬行</h2>
</div>

4.遍历循环

<script type="text/babel">
    var arr = [
        { id:100001,goodsname:'小米手机',price:3999 },
        { id:100002,goodsname:'笔记本电脑',price:5999 },
        { id:100003,goodsname:'冰箱',price:4999 }
    ]
    var uls = (<ul>
    {
        arr.map(item=>{
            return(
                <li key={ item.id }>
                    <p>商品编号：{ item.id }</p>
                    <p>商品名称：{ item.goodsname }</p>
                    <p>商品价格：{ item.price }</p>
                </li>
            )
        })
    }
    </ul>)
    ReactDOM.render(uls,document.querySelector("#box"))
</script>

5.条件判断

　　(1)在jsx中，实现条件判断可以使用if

arr.map(item=>{
    if(item.status){
       return (
         <li key={ item.id }>
                <p>商品编号：{ item.id }</p>
                <p>商品名称：{ item.goodsname }</p>
                <p>商品价格：{ item.price }</p>
        </li>
        )
    }
})

　　(2)如果在jsx渲染的虚拟DOM中需要再次使用条件判断

<p>
    {
        (
            function(){
                if(item.isnew == 1){
                    return <span>新品</span>
                }
            }()
        )
    }
</p>

6.注意事项

(1)不能把html和body标签当成挂载点
(2)虚拟DOM只能有一个根标签
(3)单标签要有闭合，input、hr、br、img
(4)行内样式，要写成对象格式

<div id="box2" style={ { color:'red' } }>box2</div>

(5)class属性

　　class属性要改为className

(6)for属性

　　for属性要改为htmlFor

四、脚手架

1.安装

npm i create-react-app -g

　　验证是否安装成功

create-react-app -V

2.初始化项目

　　进入一个指定的目录（不要在c盘或者桌面），执行命令

create-react-app 项目名称

项目名称不要包含中文和空格

3.启动项目

　　在命令行中进入到项目根目录，执行命令

npm start

项目启动成功后，会自动打开浏览，并在3000端口上运行

4.项目目录结构

node_modules            项目依赖目录
public                    项目运行根目录
src                        项目源码目录
    index.js            项目启动文件
    index.css            全局样式文件
    App.js                根组件
    App.css                根组件样式文件

项目运行流程：

　　public/index.html

　　src/index.js

　　src/App.js

五、组件

1.函数组件

　　无状态组件

function App() {
    return (
        <div className="App">
            <h1>根组件</h1>
        </div>
    );
}
export default App;

2.类组件

　　状态组件（业务组件）

　　在react中，组件的首字母要大写

import React from 'react'
// 声明一个类组件
export default class Home extends React.Component{
    render(){
        return(
            <div>
                <h1>home组件</h1>
            </div>
        )
    }
}

六、状态机

只有类组件才有状态机

1.定义方式一

　　在类中直接定义一个state属性，属性值的数据类型是对象

state = {
    msg : 'react状态机'
}
render(){...}

2.定义方式二

constructor(){
    super();//在构造函数中，必须要先调用super，才能够获取到this指向
    this.state = { 
        msg : 'react状态机'
    }
}
render(){...}

　　在页面组件中使用状态机中的数据

<p>{ this.state.msg }</p>

3.修改状态机中的数据

　　在状态机中给提供了一个setState方法，用来修改状态机中的数据，同时可以实现页面重新渲染。

　　setState方法做了两件事情：

　　　　第一个是合并数据

　　　　第二个是调用render方法来重新渲染页面

import React, { Component } from 'react'
export default class Clock extends Component {
    state = {
        nowtime : new Date().toLocaleTimeString()
    }
    changeTime(){
        setInterval(() => {
            // this.state.nowtime = new Date().toLocaleTimeString()
            this.setState({
                nowtime : new Date().toLocaleTimeString()
            })
        }, 1000);
    }
    // 组件挂载完成生命周期钩子函数
    componentDidMount(){
        this.changeTime();
    }
    render() {
        return (
            <div>
                <h2>当前时间：{ this.state.nowtime }</h2>
            </div>
        )
    }
}

posted on 2021-01-28 20:21 三岁惹阅读(41) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部