React第二篇 React语法

完整学习笔记

完整代码在这里 github

React第一篇 npm、yarn介绍
React第二篇 React语法
React第三篇 单页应用开发
React第四篇 路由&Hooks
React第五篇 综合应用(登录+列表)



主流前端框架:

  • vue(mvvm)
  • react (mvvm)
  • angular(mvc)

1.React介绍

特性

  • 声明式:如声明变量,在react中可以声明组件、变量等
  • 组件化
    • 独立的模块开发成小组件,在不同的页面进行嵌套,类似堆积木的方式
    • 任何大的项目都可以拆分成无数小的项目,小的项目可以拆分成一个个小零件
    • 将积木拼在一起堆成一个大的项目
    • 模块化和组件化的区别:==模块化相对于功能(如支付,订单做成独立的功能), 组件化侧重于UI==
  • 灵活
    • 支持单页面和多页面,通过路由分发出不同的页面
    • 支持服务端渲染,把react丢到node.js中去,渲染出多个页面
    • React Native,App开发

引入方式

cdn

基本语法

  • ReactDOM.render() 渲染元素 如 div 等
  • React.createElement() 创建元素(虚拟dom模拟真实dom进行对比差异,然后渲染), react核心库提供各种api操作dom
  • React.Component ES6语法,开发中经常使用extents继承React.Component

2.编写Hello World

  • 首先vi命令 touch index.html创建程序入口
  • cdn或者npm方式引入react
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>React demo 4</title>
    <!-- cdn方式引入-->
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> 
    <!-- 引入babel -->
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 

    <!-- 或者npm 方式引入 -->
    <!-- <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script> -->
</head>
<body>
    <div id = "app"></div>
    <script>
        var hello = React.createElement('h1',{},"Hello world!");
        ReactDOM.render(hello,document.getElementById('app'));
    </script>
</body>
</html>
  • ES6语法糖
    • 引入babel 并且在div下script下添加type="text/babel"属性,即可在script下直接写html标签
    <head>
      ...
      <!-- 引入babel -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 
      ...
    </head> 
    
     ...
    
    <body>
        <div id = "app"></div>
        <script type = "text/babel">
            // var hello = React.createElement('h1',{},"Hello world!");
            // ReactDOM.render(hello,document.getElementById('app'));
            ReactDOM.render(
                <h1>Hello,World</h1>,
            document.getElementById('app'));
        </script>
    </body>
    
    

3.jsx介绍

  • 1 即在js中编写html代码
// 1 js中插入html代码
    //原生方式 
    // var hello = React.createElement('h1',
    // {
    //     className:'red',
    //     name:'jack'
    // },
    // "Hello world!");
    // ReactDOM.render(hello,document.getElementById('app'));

    //语法糖    
    ReactDOM.render(
        <h1 className="red" name="jack">Hello,React</h1>,
    document.getElementById('app'));
  • 2 同时html中也可以嵌套js代码
// 2 html中插入js代码
    var name = 'jack';
    var ele = <h1 className="red" name="jack">Hello,{name}</h1>;
    ReactDOM.render(
        ele,
    document.getElementById('app'));

4. 元素渲染

  • React 只会更新必要的部分
  • 值得注意的是 React DOM 首先会比较元素内容先后的不同,而在渲染过程中只会更新改变了的部分。
  • 修改代码,每隔1s重新渲染一次,查看chrome控制台
// 元素渲染
        function tick(params) {
            var time = new Date().toLocaleTimeString();
            var ele = <div>
                    <h1 className="red" name="jack">Hello,jack</h1>
                    <h2> 现在是,{time} </h2>
                </div>

            ReactDOM.render(
                ele,
             document.getElementById('app'));
        }
        setInterval(() => {
            tick();
        }, 1000);   
  • 可以看到,只会重新渲染改变的节点,而不会重新渲染整个标签
  • vue是双向绑定,react是单向绑定

原文链接:juejin.im

上一篇:手写Promise,手把手过程
下一篇:[干货] 你需要了解的前端知识 — 跨域

相关推荐

官方社区

扫码加入 JavaScript 社区