React基础讲解

Posted stay_少年与梦

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了React基础讲解相关的知识，希望对你有一定的参考价值。

文章目录

前言

今天我们一起来学习react的内容，简单的学习一下。

一、React是什么？

是一个用于构建用户界面的 javascript 库。

二、如何使用

1.基于浏览器的模式

React.js 提供 React.js 核心功能代码，如：虚拟 dom，组件

  • React.createElement(type,props,children);

  • ReactDOM 提供了与浏览器交互的 DOM 功能，如：dom 渲染

    • ReactDOM.render(element, container[, callback])
      • element：要渲染的内容
      • container：要渲染的内容存放容器
      • callback：渲染后的回调函数

babel

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

react.development.js提供了核心代码
react-dom.development.js提供了与浏览器交互的Dom功能

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>

    <script>


/* 
`react.development.js 提供了核心代码
react-dom.development.js提供了与浏览器交互的Dom功能


	基础格式
	
*/
        ReactDOM.render(
            "今天天气",
            document.querySelector("#root"),
            ()=>
                console.log("渲染成功");
            
        );
    </script>
</body>
</html>

2.利用react 创建视图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
</head>
<body>
    <div id="root"></div>

    <script>
        let h1 = React.createElement("h1",null,"我是一个标题");
        let p = React.createElement("p",null,"我是一个段落标签");
        let el= React.createElement("header",id:"header",h1,p);
        ReactDOM.render(
            el,
            document.querySelector("#root"),
            ()=>
                console.log("渲染成功");
            
        );
    </script>
</body>
</html>

3.JSX

是一个基于 JavaScript + XML 的一个扩展语法

  • 它可以作为值使用

  • 它并不是字符串

  • 它也不是HTML

  • 它可以配合JavaScript 表达式一起使用

    不可以和js语句一起使用
    所有的标签名必须是小写
    所有标签必须闭合，哪怕单标签

    class 要写做 className
    style 接收的是一个对象，并不是字符串
    每次只能输出一个标签（或者说必须要有一个容器）
    唯一父级 唯一容器

JSX 使用注意事项

  • 必须有,且只有一个顶层的包含元素 - React.Fragment
  • JSX 不是html，很多属性在编写时不一样
    • className
    • style
  • 列表渲染时，必须有 key 值
  • 在 jsx 所有标签必须闭合
  • 组件的首字母一定大写，标签一定要小写
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">
        /* 
         JSX ：javascript 和 xml的扩展语法
         */
        ReactDOM.render(
            <header>
                <h1> hello react</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"),
            () => 
                console.log("渲染成功");
            
        );
    </script>
</body>

</html>

4.插值表达式

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

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

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

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

代码示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

    // 各种数据的插值状态
        // let str = "天气" //原样输出
        // let str = 1; //原样输出
        // let str = false; //不输出
        // let str = undefined;//不输出
        // let str = null;//不输出
        // let str = ["内容1","内容2"];//去掉，原样输出
        let str =

            name: "拜拜",
            age:18
         //报错  要单独去找某个属性
        ReactDOM.render(
            <header>
                <h1>  str.name不错</h1>
                <p>利用JSX来渲染</p>
            </header>,
            document.querySelector("#root"),
            () => 
                console.log("渲染成功");
            
        );
    </script>
</body>

</html>

5.条件输出

输出数据类型

  • 字符串、数字：原样输出
  • 布尔值、空、未定义 会被忽略

列表渲染

  • 数组
  • 对象
    扩展：虚拟 DOM （virtualDOM） 和 diff

条件渲染

  • 三元运算符
  • 与或运算符
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>

    <script type="text/babel">

    // 条件输出
        // ?: 类似 if...else
        // || 类似 if(!) 取反
        // && 类似 if()
        ReactDOM.render(
            <header>
                <h1>true?"成立":"不成立"</h1>
                <p>false||"利用JSX来渲染"</p>
                <div>true&&"正确"</div>
            </header>,
            document.querySelector("#root"),
            () => 
                console.log("渲染成功");
            
        );
    </script>
</body>

</html>

6.列表循环

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/react.development.js"></script>
    <script src="js/react-dom.development.js"></script>
    <script src="js/babel.min.js"></script>
</head>

<body>
    <div id="root">

        <!-- <ul v-for="item in arr">
            <li>item</li>
        </ul> -->
    </div>

    <script type="text/babel">

        let data =[
            "内容1",
            "内容2",
            "内容3",
            "ddd"
        ]
        
        function toData()
            let arr=[];
            data.forEach(item=>
                return arr.push(<li>item</li>)
            )

            return arr;
        
        // ReactDOM.render(
        //     <header>
        //         toData()
        //     </header>,
        //     document.querySelector("#root"),
        //     () => 
        //         console.log("渲染成功");
        //     
        // );
        ReactDOM.render(
            <ul>
                
                    data.map(item=>
                    return<li>item</li>
            ) 
                
            </ul>,
            document.querySelector("#root"),
            () => 
                console.log("渲染成功");
            
        );
    </script>
</body>

</html>

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

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

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

安装与使用

通过 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

类式组件

  • 组件类必须继承 React.Component
  • 组件类必须有 render 方法

代码示例

import React,Component from "react";
import './FriendList.css';
import data from './data';
import Dl from './dL'
export default class Friendlist extends Component 
    render()
        return (
            <div className="friend-list">
              
                Object.keys(data).map(item=>
                    return (<Dl
                        name = item
                        value =data[item]
                    />)
                )
              
            </div>
        )

props 和 state

  • props 父组件传递过来的参数
  • state 组件自身状态
    • setState
    • 多个 setState 合并‘
import React,Component from "react";

export default class Dl extends Component React基础讲解


 React Native专题


 React Native专题-江清清


 P19:React高级-生命周期讲解


 P20:React高级-生命周期讲解 componentWillUnmount


 P18:React高级-生命周期 Mounting 阶段讲解