react(一)_react setstate值取反-CSDN博客

本文链接：https://blog.csdn.net/x94410891/article/details/119118282

本文介绍了React的基础知识，包括React是什么、声明式编程的概念、React的特点如高效DOM操作、组件化编码。此外，还详细讲解了React的安装使用、元素渲染、JSX、插值表达式、条件渲染、组件（类式和函数式组件）、props和state的使用。通过实例展示了如何在浏览器中渲染React元素和创建React开发环境。

摘要由CSDN通过智能技术生成

react

react是什么?

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

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

react特点

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

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

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

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

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

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

什么是声明式编程?

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

React高效的原因

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

react安装使用

基于浏览器的模式

直接引入 Staticfile CDN 的 React CDN 库

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

react.development.min.js : React 的核心库
react-dom.development.js: 提供与 DOM 相关的功能如：dom 渲染
babel.min.js:在浏览器中处理 JSX

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

element：要渲染的内容

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

callback：渲染后的回调函数

实例

<!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>