ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

第一章、react高级

2022-09-07 01:00:08  阅读:159  来源: 互联网

标签:render dom 高级 第一章 react message jsx hello


目录

一、邂逅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>

标签:render,dom,高级,第一章,react,message,jsx,hello
来源: https://www.cnblogs.com/linding/p/16663886.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有