开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> react(一) -> 正文阅读

[JavaScript知识库]react(一)

react

react是什么?

react是一个JavaScript 库 ,能够高效、快速的构建用户界面

它是一个轻量级库 , 它遵循组件设计模式、声明式编程范式和函数式编程概念

react特点

1.声明式编程 ?React采用声明范式，可以轻松描述应用。

2.高效 ?React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 ?React可以与已知的库或框架很好地配合。

4.JSX ? JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

组件化编码 ? 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 ? React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

什么是声明式编程?

告诉计算机你想要的是什么(what)，让计算机想出如何去做(how)。

React高效的原因

虚拟(virtual)DOM, 不总是直接操作DOM
DOM Diff算法, 最小化页面重绘

react安装使用

基于浏览器的模式

直接引入 Staticfile CDN 的 React CDN 库

react-dom.development.js
<script src="https://unpkg.com/react@17/u
md/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
 react.development.min.js : React 的核心库

react-dom.development.js: 提供与 DOM 相关的功能如：dom 渲染

ReactDOM.render(element, container[, callback])

element：要渲染的内容

container：要渲染的内容存放容器

callback：渲染后的回调函数

babel.min.js:在浏览器中处理 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="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
</head>
?
<body>
    <div id="root"></div>
    <script>
        ReactDOM.render(
            '今天天气不错',
            document.querySelector('#root')
        )
    </script>
</body>
?
</html>

解析:

将今天天气不错插入到 id=root 的div标签中

ReactDOM.render是React最最基本的方法，用于将模板转为HTML语言，并插入指定的DOM节点。其中第一个参数为模板内容，第二个参数为指定的DOM节点。

使用 create-react-app 快速构建 React 开发环境

通过 npm、yarn、npx 都可以

安装

npm i -g create-react-app

使用

创建

create-react-app reactapp

运行

cd reactapp
npm start

在浏览器中打开

请添加图片描述

目录结构:

请添加图片描述

元素渲染

元素就是普通的js对象
元素是构成 React 应用的最小单位，它用于描述屏幕上输出的内容。
React 元素都是不可变的。当元素被创建之后，你是无法改变其内容或属性的。
目前更新界面的唯一办法是创建一个新的元素，然后将它传入 ReactDOM.render() 方法：

创建react元素

React.createElement( )

第一个参数：标签名如div、span，或者 react 组件

第二个参数：传入的属性

第三个及之后的参数：都作为组件的子组件

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'),
        ()=>{
        }
    )

JSX

JSX基于javascript和xml的扩展语法

React 使用 JSX 来替代常规的 JavaScript

ReactDOM.render(
            <div>
                <div className="box" style={/*单行注释*/ {width:'400px'} }></div>
             </div>,
            document.querySelector('#container')
)

注意事项:

它可以作为值使用,它不是空字符串,它不是html

可以配合js表达式一起使用

它不可以和js语句一起使用

所有的标签名必须是小写

所有的标签必须闭合,哪怕单标签

class要写作className

style接收的是一个对象,并不是字符串

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

插值表达式

它和vue里的{{}}是一样的效果,可以算数运算,函数调用等等

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

ReactDOM.render(

<div>
  <h1>{1+1}</h1>
</div>,
    document.getElementById('#root')
);

注意:

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

注释:

{/单行注释/}

{/*

	多行注释

*/}

输出数据类型

string,number 会原样输出

boolean,undefined,null 时不会输出

数组会自动展开所有成员

对象 :

const obj={name:'张三'}
const arr=[1,2,3]
    ReactDOM.render(
        <header>
        <h1>{ obj.name }</h1>
        <h1>{ arr }</h1>
    </header> ,
    document.querySelector('#root')
)

条件渲染

三元,与或运算符

? 类似 if…else

|| 类似 if(!) 取反

&& 类似 if()

 document.querySelector('#root')
ReactDOM.render(
        <header>
        <h1>react{true?'成立':'不成立'}</h1>
        <p>{false||'aaa'}</p>
        <div>{true&&'bbb'}</div>
    </header> ,
        document.querySelector('#root')
    )

样式

document.querySelector('#root')
var myStyle = {
    fontSize: 100,
    color: '#FF0000'
};
ReactDOM.render(
    <h1 style = {myStyle}>菜鸟教程</h1>,
     document.querySelector('#root')
);

组件

React通过组件将界面拆分成一个个可复用的模块，每一个模块就是一个React 组件。一个React 应用由若干组件组合而成，一个复杂组件也可以由若干简单组件组合而成。

类式组件

组件类必须继承 React.Component

组件类必须有 render 方法

定义模版的函数名首字母必须大写

import React,{Component} from 'react'
import ReactDOM from 'react-dom'
?
class App extends Component{
    render(){
        return(
            console.log(this),
            <h1>Hello {this.props.name}React!</h1>
        )
    }
}
?
ReactDOM.render(
    <App name="aa"/>,
    document.querySelector('#root')
)

函数式组件

函数的名称就是组件的名称

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

import React from 'react'
import ReactDOM from 'react-dom'
?
const App = (props) => <h1>欢迎进入{props.name}的世界</h1>
?
ReactDOM.render(
  // React组件的调用方式
  <App name="react" />,
  document.getElementById('root')
)

props 和 state

props 是组件对外的接口，state 是组件对内的接口

props 父组件传递过来的参数
state 组件自身状态
- setState
- 多个 setState 合并

主要区别：

State是可变的
而Props对于使用它的组件来说，是只读的，要想修改Props，只能通过该组件的父组件修改。

state

通过this.setState()修改

state = {
        num: 0,
      }
handleClick = () => {
    const { num } = this.state;
    this.setState({ num:  1 });
}
render() {
   return (
      <div>
        counter is:{this.state.num}
      <button onClick={this.handleClick} >点我</button>
      </div>
    )
}
state = {
        num: 0,
      }
handleClick = () => {
    const { num } = this.state;
    this.setState({ num:  1 });
}
render() {
   return (
      <div>
        counter is:{this.state.num}
      <button onClick={this.handleClick} >点我</button>
      </div>
    )
}

props

 function Com(props){
        return (
            <div>{props.text} ---{props.num}</div>
        )
    }
    let obj={
        text:"text数据",
        num:"num数据"
    }
       ReactDOM.render(<Com{...obj} />,
       document.getElementById("root"));