【React学习】React 实例

最新推荐文章于 2023-08-27 15:45:17 发布
最新推荐文章于 2023-08-27 15:45:17 发布
阅读量480 收藏 2
点赞数 1
分类专栏： 前端开发 有用的知识
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_22182989/article/details/90313709
版权

引入方式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello,world! Hello,ccc!</h1>,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

效果：


***********

将元素渲染到 DOM 中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        const element = <h1>hi,ccc!</h1>;
        ReactDOM.render(
            element,
            document.getElementById("hi")
        );
    </script>
</body>
</html>

效果：

let和const命令：

ES6新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const声明的变量不得改变值，这意味着，const一旦声明变量，就必须立即初始化，不能留到以后赋值。

const的作用域与let命令相同：只在声明所在的块级作用域内有效。

参考：React 语法之let和const命令https://cloud.tencent.com/developer/article/1036032

*********************

更新元素渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
    function tick() {
        const element =
            (
                <div>
                    <h1>hi,ccc,hi!time?</h1>
                    <h2>现在是：{new Date().toLocaleTimeString()}</h2>
                </div>
            );
        ReactDOM.render(
            element,
            document.getElementById('hi')
        );
    }

    setInterval(tick, 1000);
</script>
</body>
</html>

效果：

以上实例通过 setInterval() 方法，每秒钟调用一次 ReactDOM.render()。

***

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

*********************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        function Clock(props) {
            return (
                <div>
                    <h1>hello,ccc!</h1>
                    <h2>now:{props.date.toLocaleString()}</h2>
                </div>
            );
        }
    
        function tick() {
            ReactDOM.render(
                <Clock date={new Date()}/>,
                document.getElementById('hi')
            );

        }

        setInterval(tick, 1000);
    </script>
</body>
</html>

效果：

************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        class Clock extends React.Component {
            render() {
                return (
                    <div>
                        <h1>hi,ccc!</h1>
                        <h2>now{this.props.date.toLocaleTimeString()}</h2>
                    </div>
                );
            }
        }

        function tick() {
            ReactDOM.render(
                <Clock date={new Date()}/>,
                document.getElementById('hi')
            );
        }

        setInterval(tick, 1000);
    </script>
</body>
</html>

效果：

注意：不要以(作为一行的开头。否则出错不显示

**********

注意，在添加属性时， class 属性需要写成 className ，for 属性需要写成 htmlFor ，这是因为 class 和 for 是 JavaScript 的保留字。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
    <style>
        .hi {
            color: deeppink;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel">
        const element = (
            <h1 className="hi">hi,ccc!</h1>
        );
        ReactDOM.render(element, document.getElementById('root'));
    </script>
</body>
</html>

效果：

*****

js的引用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="root"></div>
    <script type="text/babel" src="../js/hi-react.js"></script>
</body>
</html>
hi-react.js
const element = (
    <h1 className="hi">hi,ccc!</h1>
);
ReactDOM.render(element, document.getElementById('root'));

效果：

****************

表达式计算：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        ReactDOM.render(
            <h1>计算1+1={1 + 1}</h1>,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

效果：

**************

在 JSX 中不能使用 if else 语句，但可以使用 conditional (三元运算) 表达式来替代。以下实例中如果变量 i 等于 1 浏览器将输出 true, 如果修改 i 的值，则会输出 false.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        var i = 100;
        ReactDOM.render(
            <h1>{i === 100 ? 'true' : 'false'}</h1>,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

效果：

***********

样式需要写成驼峰式命名法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        var cccStyle = {
            fontSize: 50,
            color: 'red'
        };
        ReactDOM.render(
            <h1 style={cccStyle}>hi,ccc</h1>,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

效果：

*********************

注释：

    <div id="hi"></div>
    <script type="text/babel">
        ReactDOM.render(
            <div>
                {/*
                *多行注释...
                */}
                <h1>hi,ccc!</h1>
                {/*单行注释...*/}
            </div>,
            document.getElementById('hi')
        );
    </script>

*************

数组，会自动展开：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        var arr = [
            <h1>hi,ccc!</h1>,
            <p>这是一个p标签,1+1={1 + 1}</p>,
            <span>hi,span</span>
        ];
        ReactDOM.render(
            <div>{arr}</div>,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

这里显示出来的span标签效果不是内联的

效果：

**********

组件：2种写法：用函数或者ES6 class 来定义一个组件：

注意，原生 HTML 元素名以小写字母开头，而自定义的 React 类名以大写字母开头，比如 HelloMessage 不能写成 helloMessage。除此之外还需要注意组件类只能包含一个顶层标签，否则也会报错。比如用一个div包裹多个其他标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
<div id="hi"></div>
<script type="text/babel">
    function SayHi(props){
        return <h1>hi,ccc!</h1>;
    }
    const element = <SayHi/>;
    ReactDOM.render(
        element,
        document.getElementById('hi')
    );
</script>
</body>
</html>

效果：

************

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        class SayHi extends React.Component {
            render() {
                return <h1>hi,ccc!</h1>;
            }
        }

        const element = <SayHi/>
        ReactDOM.render(
            element,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

效果同上

************

向组件传递参数：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        function SayHi(props) {
            return <h1>你好！{props.name}</h1>;
        }
        const element = <SayHi name="ccc"/>;
        ReactDOM.render(
            element,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

效果：

************

复合组件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        function SayName(props) {
            return <p>名字是：{props.name}</p>;
        }

        function SayAge(props) {
            return <p>年龄是：{props.age}</p>;
        }

        function SayTel(props) {
            return <p>电话号码是：{props.tel}</p>;
        }

        function App() {
            return (
                <div>
                    <SayName name="ccc"/>
                    <SayAge age="20"/>
                    <SayTel tel="13612341234"/>
                </div>
            );

        }

        ReactDOM.render(
            <App/>,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

效果：

**************

React State(状态)

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
    <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
    <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
    <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body>
    <div id="hi"></div>
    <script type="text/babel">
        class Clock extends React.Component {
            constructor(props) {
                super(props);
                this.state = {date: new Date()};
            }
    
            render() {
                return (
                    <div>
                        <h1>hi,ccc</h1>
                        <h2>现在是：{this.state.date.toLocaleTimeString()}</h2>
                    </div>
                );
            }
        }
    
        ReactDOM.render(
            <Clock/>,
            document.getElementById('hi')
        );
    </script>
</body>
</html>

效果：

***********
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

南北极之间
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
「React」React Hooks与setInterval的踩坑问题总结
老司机的后备箱
05-10 1526
一、需求 我们希望有一个每一秒自动+1的定时器 function Counter() { let [count, setCount] = useState(0); useEffect(() => { let id = setInterval(() => { setCount(count + 1); }, 1000); return () => clearInterval(id); }, [count]); return <h1&gt
react初步学习(二)
An_Cool_bree的博客
07-27 424
一、状态和生命周期   状态state, 生命周期 liftcircle.   之前说过，一旦元素被渲染了之后就不可改变了，但我们可以通过重新渲染的方法使页面得以刷新，同样我们提到过最常用的方法是编写一个可复用的具有状态的组件，这里的状态，就是我们将要说的 state   我们对上述提过的计时器tick 中的计时功能封装成一个函数式组件如下： function Clock(props) { return ( <div> <h1&g
react hooks-页面实时刷新（setInterval）
Realizee的博客
08-10 7786
页面实时刷新一般用定时器（setInterval（））实现 1. 页面使用定时器一定要记得清除。 2. useEffect 的数组依赖不要忘记，不然只执行一次。 3. 也可以使用useRef（为了避免setInterval变量形成闭包）.........
React中如何使用setInterval函数
热门推荐
哈工大许政的博客
01-19 3万+
React中如何使用setInterval函数 本文是基于Windows 10系统环境，学习和使用React： Windows 10 一、setInterval函数 (1) 定义 setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。 setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInter...
在 React 中如何使用定时器
wbskb的博客
08-27 3812
在React中使用定时器通常有两种方式：使用setInterval和setTimeout函数。根据你的具体需求选择适合的定时器函数，并根据组件的生命周期来启动和清除定时器。
通过实例学习React中事件节流防抖
01-19
节流 方法一 import Throttle from 'lodash-decorators/throttle'; export default class Search extends Component { constructor(props) { super(props) this.handleSearch = this.handleSearch.bind(this);...
React学习之JSX与react事件实例分析
11-27
本文实例讲述了React学习之JSX与react事件。分享给大家供大家参考，具体如下： 1、JSX 1.1、表达式 在React中使用JSX来描述HTML页面，而且可以与js混合使用，使用JavaScript表达式时要将表达式包含在大括号里 const...
react next框架实例
最新发布
11-18
react next框架实例
react 生命周期实例分析
10-15
本文将深入探讨React组件的生命周期，通过实例分析其基本原理、操作步骤以及注意事项。 首先，我们来看组件的挂载阶段，这是组件首次被创建并添加到DOM中的过程： 1. `componentWillMount()`：在组件渲染到DOM之前...
react 学习笔记
11-16
React 学习笔记 React 是一个流行的前端框架，用于构建用户界面。学习 React 需要掌握其核心概念，包括组件生命周期、状态管理、事件处理等。本节笔记将记录 React 学习过程中的关键知识点。 一、React 组件生命...
React 计时器案例(模块化_组件封装)
05-09
http://blog.csdn.net/liudao7994/article/details/71480235 有图
React 关于setInterval（定时器）实时显示当前时间并在页面自动更新时间
m0_64033608的博客
11-15 1683
6.#字符内修改为this.state.newTime = moment().format(‘YYYY-MM-DD HH:mm:ss’)3.使用moment() 举例:当前时间:moment().format(‘YYYY-MM-DD HH:mm:ss’)5.在render(){这里使用setInterval(()=>{#}/function(){#},Time)}该文只是初学者的分享。4.获取时间在state={React想要获取时间。
React实现页面定时刷新
liweiweili126的博客
04-17 2393
如果你使用了类似`window.location.reload()`这样的方法来强制页面重新加载，那么无论是否使用了`count`状态变量，页面都会被重新加载。在这个例子中，我们使用了`useEffect`钩子来在组件挂载时启动一个定时器，在5秒钟后调用`window.location.reload()`方法，强制浏览器重新加载页面。只有在使用`count`的代码中，当`count`更新时，React会重新渲染组件并更新DOM，从而导致页面重新渲染。因此，应该谨慎地使用此方法，并在确保必要时才使用它。
【react——小技巧】定时器setInterval
Akukudeteng的博客
09-10 1378
示例：定时5秒更新一下时间 时间是不会自动更新的。除非你手动刷新页面，否则永远显示“1 秒前”。我们可以在 componentWillMount 中启动一个定时器，每隔 5 秒调用一下 _referdata，让它去通过 setState 更新 ： 解决： .... componentDidMount=()=>{ //定时器 setInterval(() => { this._referdata() }, 5000); } componentWil
React基础(超级详细，有案例)
weixin_43604021的博客
08-09 1716
React组件 Diffing算法等基础知识和用法
react解决useEffect中添加setInterval定时器无法正常执行
A__aron的博客
07-05 595
react解决useEffect中添加setInterval定时器无法正常执行
React学习: 02 React一些基础操作的简单实例
J_Sky：编程爱好者,又菜又爱玩.
10-02 510
继续学习react,搞了些入门级的小例子.
React 入门实例教程
一个有趣、有料、有内涵的地方!
12-13 1127
文章来源：阮一峰的博客http://www.ruanyifeng.com/blog/2015/03/react.html 现在最热门的前端框架，毫无疑问是 React 。 上周，基于 React 的 React Native 发布，结果一天之内，就获得了 5000 颗星，受瞩目程度可见一斑。 React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaS
react实例_React堆实例
cunfu6353的博客
07-10 433
react 实例 重要要点 Reactor是针对Java 8并提供符合Rx要求的API的React式流库 尽管API有所不同，但它使用与RxJava相同的方法和原理 它是允许操作员融合的第四代React式库，例如RxJava 2 Reactor是Spring Framework 5的React式编程模型支持中的核心依赖项。 RxJava回顾 像RxJava 2一...
react简单项目实例
10-17
好的，这里给您提供一个简单的 React 项目实例，希望能对您有所帮助。 首先，您需要安装 Node.js 和 npm。然后，您可以使用 create-react-app 工具来创建一个新的 React 项目。在命令行中输入以下命令： ``` npx ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

南北极之间

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值