React

React 是什么?

一个用于构建用户界面的 JavaScript 库

命令式编程 和 声明式编程

  • 告诉计算机怎么做(How) - 过程
  • 告诉计算机我们要什么(What) - 结果

如何使用 React

基于浏览器的模式

  • React.js 提供 React.js 核心功能代码,如:虚拟 dom,组件
    • React.createElement(type,props,children);
 // 2.利用React创建视图
        let h1 = React.createElement("h1",null,"我是一个标题");
        let div = React.createElement("div",null,"我是一个div");
        let el =  React.createElement(
                "header",
                {id:"header"},
                h1,
                div
        );                 
        ReactDOM.render(
            el,
            // React.createElement("h1",null,"我是一个标题"),
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );   
  • ReactDOM 提供了与浏览器交互的 DOM 功能,如:dom 渲染
    • ReactDOM.render(element, container,callback)
      • element:要渲染的内容
      • container:要渲染的内容存放容器
      • callback:渲染后的回调函数,可选内容

实例

  • 1.引入
    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
  • 2.容器
 <div id="box"></div>
  • 3.渲染
 ReactDOM.render(
           "参数1:渲染的内容",
            document.querySelector("#box"), //参数2:容器
             ()=>{
                console.log("渲染成功")     //参数3:可选
           }
        )

babel

babel-standalone.js:在浏览器中处理 JSX

JSX

JSX 是一个基于 JavaScript + XML 的一个扩展语法,注意事项:

  • 它可以作为值使用
  • 它并不是字符串
  • 它也不是HTML
  • 它可以配合JS 表达式一起使用
  • 它不可以和JS语句一起使用
  • 所有的标签名必须是小写
  • 所有的标签必须闭合,哪怕单标签

1.引入

    <script src="js/react.js"></script>
    <script src="js/react-dom.js"></script>
    <!-- 1.引入 -->
    <script src="js/babel.js"></script>

2.容器

<div id="box"></div>

3.设置type=“text/babel”

<script type="text/babel">                      
        ReactDOM.render(
            <header>
                <h1>标题</h1>
                <div>利用JSX来渲染</div>
            </header>,
            // React.createElement("h1",null,"我是一个标题"),
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );
    </script>
  • class要写做className

  • style 接收的是一个对象,并不是字符串,style的第一个花括号代表插值,第二个花括号代表对象

  • 每次只能输出一个标签(或者说必须要有一个容器)

 <script  type="text/babel">
      let style = {
            width:'200px',
            height:'200px',
            background:'red'
        }
        ReactDOM.render(
            // <div>
            //     <div className="bt" style={{width:'200px'}}></div>
            // </div>,
            <div>
                <div className="bt" style={style}></div>
            </div>,
            document.querySelector("#box"),

        )
    </script>

插值表达式

在 JSX 中可以使用 {表达式} 嵌入表达式

表达式:产生值的一组代码的集合

  • 变量
  • 算术运算
  • 函数调用
  • ……

注意:分清楚 表达式 与 语句 的区别,if、for、while 这些都是语句,JSX 不支持语句

各种类型内容在插值中的使用
  • 注释
    {/注释/}
    {/*
    多行注释
    */}

输出数据类型

  • 字符串、数字:原样输出
  • 布尔值 : 不输出
  • 数组 :去掉逗号,原样输出
  • 对象:没办法直接使用,需要去对象下取某一个属性
<script type="text/babel">
let data = {
            name:"姓名",
            age:18
        };
        ReactDOM.render(
            // 3.内容
            <header>                
                <h1>标题 {data.name}</h1>  
                <div>利用JSX来渲染</div>
            </header>,
            // React.createElement("h1",null,"我是一个标题"),
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );
    </script>

列表渲染

  • 数组
  • 对象
    扩展:虚拟 DOM (virtualDOM) 和 diff
<script type="text/babel">
        let data = [
            "内容1",
            "内容2",
            "内容3",
        ] 
        // function Data(){
        //     let arr = [];
        //     data.forEach(item=>{
        //        arr.push(<li>{item}</li>) 
        //     });
        //     return arr;
        // }                                                           
        ReactDOM.render(
            // 3.内容
            <ul>                
                 {
                    data.map(item=>{
                        return <li>{item}</li>
                    })
                 }
            </ul>,
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );
    </script>

条件渲染

  • 三元运算符(? : ) : 类似 if…else
  • 与运算符(&&):类似 if()
  • 或运算符(|| ):类似 if(!) 取反
 <script type="text/babel">                                                             
        ReactDOM.render(
            // 3.内容
            <header>                
                <h1>标题 {true?"成立":"不成立"}</h1>  
                <div>{false || "利用JSX来渲染"}</div>
                <div>{true&&"正确"}</div>
            </header>,
            // React.createElement("h1",null,"我是一个标题"),
            document.querySelector("#box"), 
            ()=>{
                console.log("渲染成功")
             }   
        );
    </script> 

在属性上使用 表达式

JSX 中的表达式也可以使用在属性上,但是使用的时候需要注意

  • 当在属性中使用 {} 的时候,不要使用引号包含

基于自动化的集成环境模式 - create-react-app - 脚手架

介绍

通过前面 script 的方式虽然也能完成 React.js 的开发,但是有一个现在前端很重要的特性 - 模块化,无法使用。

Create React App 是一个使用 Node.js 编写的命令行工具,通过它可以帮助我们快速生成 React.js 项目,并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包,也就是通过它,我们可以使用 模块化 以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用,其实还有更多。

这些都通过 Create React App 帮助我们安装并配置好了,开箱即用

安装与使用

通过 npm、yarn、npx 都可以

安装

npm

npm i -g create-react-app

yarn

yarn global add create-react-app

使用

安装完成以后,即可使用 create-react-app 命令

create-react-app <项目名称>

或者通过 npx 的方式

npx

npx create-react-app <项目名称>

项目目录结构说明

运行命令以后,就会在运行命令所在目录下面创建一个以项目名称为名的目录

my-app/

  • README.md
  • node_modules/
  • package.json
  • public/
  • index.html
  • favicon.ico

src/

  • App.css
  • App.js
  • App.test.js
  • index.css
  • index.js
  • logo.svg

命令脚本

create-react-app 同时也提供了其它一些命令来帮助我们进行开发

npm start

启动一个内置的本地 WebServer,根目录映射到 ‘./public’ 目录,默认端口:3000

npm run test

运行 Jest 测试

npm run build

打包应用(准备上线)

组件

对具有一定独立功能的数据与方法的封装,对外暴露接口,有利于代码功能的复用,且不用担心冲突问题。

函数式组件

  • 函数的名称就是组件的名称
  • 函数的返回值就是组件要渲染的内容

类式组件

  • 组件类必须继承 React.Component
  • 组件类必须有 render 方法
// 类式组件写法的必要条件
import React, {Component} from 'react';
import FriendList from './FriendList';

// 1.组件类必须继承 React.Component
class App extends Component{
  // 2.组件类必须有 render 方法
    render(){
      // 3.render方法的return后定义组件的内容
       return (<div><FriendList /></div>)
    }
}
export default App;
展开阅读全文

React Hooks 案例详解(React 进阶必备)

03-13
前言 如释重负,好用的技术就应该越来越简单 React Hooks 是 React 16.8 从提案转为正式加入的新特性。这个新特性是个非常棒的设计。 可以说对于React 技术栈的发展具分割线一样的意义。讲师在课程中提到:之前使用 React 作为主要的前端技术,开发一款网页游戏。在整个游戏的各个模块中,Redux ,mobx,以及蚂蚁金服的 ant-design,dva, umi 这些框架或者第三方库都有涉及使用。但是自从了解了Facebook官方提案的 Hooks 特性后,才真正觉得获得了前所未有的解脱。如果你有React开发经验,学习了解 Hooks 后,一定有一种如释重负的轻松感。 React 带来了方便也带来了迷茫 相信关心 React Hooks 这项新特性的童鞋,很多已经有了一定的 React 开发经验。那么你一定有所体验,React 给我们带来方便的同时,也的确和长久以来的前端开发模式有极大的不同。React 并不需要用继承,而是推荐用嵌套。React 有独特的 jsx 语法。大多数情况 jsx 都使得我们的代码更加简洁了。然而有些时候也给我们带来了一些困扰。 比如数据的传递,逻辑的复用。 react 是一种 mvvm 的设计模式,作为开发者一定要清楚,那些数据是业务数据,那些数据是UI数据。否则你的代码很有可能会陷入混乱局面。 大型项目中模块化与功能解耦困难 在公司项目中 App 稍大的时候,我们发现状态提升和只通过 props 进行数据传递。很多时候都很难实现我们的需求。这时无论我们是否清楚的了解,但是状态管理也就是 redux mobx 等,轻易地进入到了公司的项目中。我们经过初期的尝试发现状态管理,确实比用纯粹的 React 带来了数据传递上的方便,以及代码组织上的清晰。但前提是你看懂且理解了 redux 大神晦涩的官网文档。 本来 React 被设计用来组件化前端开发。但当我们初期使用状态管理,我们常常会过度的使用状态数据,业务逻辑和ui逻辑没有清楚的分离,最终你的应用代码结果可能是:除了少数几个组件是独立的解耦的,大多数组件都因为状态数据的共享而耦合在了一起,且他们也完全依赖状态管理框架。无法再轻松的转移复用。使用高阶组件,属性渲染,渲染回调等高级特性,确实可以帮我们解决模块或功能的解耦问题。但是这些方法,确实有点超出普通“猿类”的技能。且降低了代码的可读性,对于团队协作,这是很致命的问题。 React Hooks 真正开启前端模块化的金钥匙 对于以上问题,React Hooks 都有很好的解决方案,官方的设计动机就是解决这些曾经的繁琐,化繁为简。React Hooks 让我们在纯函数中就可以使用 React 的众多特性。而不必使用类。代码扁平,易读。解耦状态相关逻辑,UI逻辑和业务逻辑更好的分离。这些逻辑往往是纯函数,而以前很容易混合在类组件中。通过自定义 Hooks 我们可以把应用中“状态相关”逻辑解耦出来,独立编写到我们自己的hooks 中。从而更加易于复用和独立测试。
©️2020 CSDN 皮肤主题: 游动-白 设计师: 上身试试 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值