第一章、react高级

• 一、邂逅react开发和初体验
  • 1、简介
  • 2、hello react案例

一、邂逅react开发和初体验

1、简介

* react是什么？
    - 用于构建用户界面的javascript库
* 常见的javascript库
    - jquery
    - vue
    - react
    - angular
* react的起源
    - 2013年，facebook开源的javascript库
* react的特点-声明式编程
    - ui = f(state)
* react的特点-组件化开发
    - 复杂的界面拆分成一个个小的组件
* react的特点-多平台适配
    - 2013：web
    - 2015：reactnative用于移动端开发
    - 2017：reactvr用于开发虚拟现实web应用程序
* 掌握最先进的思想和技术
    - react hooks的思想
    - flutter（widget-element-renderobject）对应react（jsx-虚拟dom-真实dom）
* hackerrank调查显示
* react在国内外被广泛使用
    - 网易云音乐
    - 斗鱼
    - 知乎
    - 阿里云
    - 优酷

2、hello react案例

• 原生实现

<h2 id="text"></h2>
<button id="btn">改变文本</button>
<script>
    // 命令式编程：每做一个操作，都是给计算机（浏览器）一步步命令
    // 声明式编程：
    // 1、定义数据
    let message = 'hello world'
    let text = document.getElementById("text")
    let btn = document.getElementById("btn")
    // 2、将数据显示在h2元素中
    text.innerHTML = message
    // 3、点击按钮，界面的数据发生变化
    btn.onclick = function () {
        message = 'hello react'
        text.innerHTML = message
    }
</script>

• react实现

<div id="app"></div>
<!-- crossorigin：这个属性的目的是为了拿到跨域脚本的错误信息 -->
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<!-- 注意事项：使用jsx，并且希望script中的jsx的代码被解析，必须在script标签中添加一个属性 -->
<!-- jsx特点：多个标签最外层（根）只能有一个标签 -->
<script type="text/babel">
    /**
     * 一、react开发依赖
     *     - react：核心代码
     *     - react-dom：跨平台
     *     - babel：代码转换工具
     * 二、react-dom
     *     - web端：将jsx渲染成真实dom
     *     - native端：将jsx渲染成原生的控件（android的button，ios的uibutton）
     * 三、babel
     *     - es6 -> babel -> es5
     *     - jsx（语法糖） -> babel -> React.renderElement()
     * 四、引入react依赖
     *     - 直接cdn引入
     *     - 下载后，添加本地依赖
     *     - 通过npm管理（后续脚手架再使用）
     */
    let message = "hello world"

    function btnClick() {
        message = 'hello react'
        render()
    }

    function render() {
        // <div></div>:jsx代码
        ReactDOM.render(<div>
            <h2>{message}</h2>
            <button onClick={btnClick}>改变文本</button>
        </div>, document.getElementById('app'))
    }

    render()
</script>

• 组件化实现

<div id="app"></div>
<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
    // 封装app组件
    class App extends React.Component {
        constructor() {
            super();
            this.state = {
                message: "hello world"
            }
        }

        render() {
            return (
                <div>
                    <h2>{this.state.message}</h2>
                    <button onClick={this.btnClick.bind(this)}>改变文本</button>
                </div>
            )
        }

        btnClick() {
            this.setState({
                message: 'hello react'
            })
        }
    }

    // 渲染组件
    ReactDOM.render(<App/>, document.getElementById("app"))
</script>