[React框架学习笔记]React入门笔记

news/2024/7/15 19:12:37 标签: react.js, javascript, ecmascript

React入门笔记

  • React环境准备
    • Node安装使用
      • 什么是Node？
      • Node的作用？
    • NPM和Yarn的比较
  • React介绍
    • 特性
  • 知识点
    • 编写HelloWorld
      • 基本语法
        • 代码
        • 使用npm
      • babel语法糖
    • JSX介绍
    • 元素渲染
    • 组件和Props
    • React生命周期
    • 事件处理
    • 条件处理
    • 列表渲染
      • 一维
      • 二维

React环境准备

  • Node安装使用
  • Npm使用
  • Yarn使用

Node安装使用

什么是Node？

Node.js是一个基于Chrome V8引擎的JavaScript运行环境

Node的作用？

  • 前端开发环境
    • Webpack
    • NPM插件
    • Server
  • 服务端动态编程语言
    • Java Web
    • PHP Web
    • Node Web

NPM和Yarn的比较

其实没什么区别，npm里面内置的也是Yarn
Yarn是并发的，前端的包管理器

  • 速度快
  • 更安全
  • 更可靠

React介绍

前端百家争言的局面已经过去了，随着前端的发展，框架开始变为三大主流。

  • Vue
  • React
  • Angular

前两者是MVVM模型，第三者是MVC模型。

个人认为，第三者好景不长…不是针对谁，我是说Angular可能是乐色！

特性

  • 声明式
  • 组件化
  • 灵活

知识点

  • 编写HelloWorld
  • JSX语法介绍
  • 元素渲染
  • 组件和props介绍
  • React生命周期
  • 事件处理
  • 条件渲染
  • 列表渲染

编写HelloWorld

基本语法

  • ReactDOM.render() 渲染元素
  • React.createElement() 创建一个元素
  • React.Component 创建组件

在html中引入script

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

代码

<!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@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
</head>
<body>
    <div id="app"></div>
    <script>javascript">
        var hello=React.createElement('h1',{},"hello world!")
        ReactDOM.render(hello,document.getElementById('app'))
    </script>
</body>
</html>

使用npm

npm add react react-dom --save

在这里插入图片描述

之后可以引入React/umd/中的react.development.js
来代替原先引入的两条

在这里插入图片描述
渲染成功！

babel语法糖

同学们很激动的东西来了，就是语法糖，怎么说，上面的写法还是太非人类了！
createElement再加进去很麻烦，所以语法糖就来了，有更简便的写法！

<!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@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>    
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">javascript">
        // var hello=React.createElement('h1',{},"hello world!")
        ReactDOM.render(
        <h1>Hello,world!</h1>
        ,document.getElementById('app'))
    </script>
</body>
</html>

JSX介绍

JS中编写HTML代码
就和上面一样，在render函数里面写了h1标签
还可以用{}传递参数！

<!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@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> -->
    <script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>    
    <style>
        .red{
            color:red
        }
    </style>
</head>
<body>
    <div id="app"></div>
    <script type="text/babel">javascript">
        // var hello=React.createElement('h1',{},"hello world!")
        var name='jack'
        var ele=<h1 className="red" name="jack">Hello,{name}</h1>
        ReactDOM.render(
        ele
        ,document.getElementById('app'))
    </script>
</body>
</html>

元素渲染

    <div id="app"></div>
    <script type="text/babel">javascript">
        function tick(){
            var time=new Date().toLocaleTimeString()
            var ele= <div>
                <h1 className="red" name="jack">Hello,jack</h1>
                <h2>{time}</h2>    
            </div>
            ReactDOM.render(
            ele
            ,document.getElementById('app'))
        }
        setInterval(tick,1000) //只有h2会变化
    </script>

在这里插入图片描述

组件和Props

  • React.createClass() 已经淘汰了
  • 函数式组件(无状态组件)
  • React.Component

初体验

    <div id="app"></div>
    <script type="text/babel">javascript">
        function Hello(props){
            return <div>
                <h1>Hello，{props.name}</h1>
                <p>年龄：{props.age}</p>
                <p>擅长：JavaScript</p>    
            </div>
        }
        ReactDOM.render(
            <Hello name="jack" age="30"/>
            ,document.getElementById("app")
        )
    </script>

我们声明一个带状态的组件

    <div id="app"></div>
    <script type="text/babel">javascript">
        class HelloJack extends React.Component{
            render(){
                return <div>
                    <h1>Hello，{this.props.name}</h1>
                    <p>年龄：{this.props.age}</p>
                    <p>擅长：JavaScript</p>    
                </div>
            }
        }
        ReactDOM.render(
            <HelloJack name="jack" age="30"/>
            ,document.getElementById("app")
        )
    </script>

React生命周期

四个阶段

  • 组件初始化阶段
  • 组件加载阶段
  • 数据更新阶段
  • 组件销毁阶段
    <div id="app"></div>
    <script type="text/babel">javascript">
        class HelloJack extends React.Component{
            constructor(props){
                console.log('初始化阶段');
                // 初始化props
                super(props)
                // 初始化状态
                this.state={
                    name:'jack',
                    age:30
                }
            }
            componentWillMount(){
                console.log('组件加载前');
            }
            componentDidMount(){
                console.log('组件加载后');
            }
            updateUser=()=>{
                // 错误的语法
                // this.state.name='tim'
                this.setState({
                    name:'tim',
                    age:32
                })
            }
            shouldComponentUpdate(){
                console.log('数据是否需要更新');
                return true
            }
            componentWillUpdate(){
                console.log('数据将要更新');
            }
            componentDidUpdate(){
                console.log('数据已经更新');
            }
            render(){
                console.log('组件加载或数据更新');
                return <div>
                    <h1>Hello，{this.state.name}</h1>
                    <p>年龄：{this.state.age}</p>
                    <p>擅长：JavaScript</p>    
                    <button onClick={this.updateUser}>更新数据</button>
                </div>
            }
        }
        ReactDOM.render(
            <HelloJack name="tom" age="31"/>
            ,document.getElementById("app")
        )
    </script>

在这里插入图片描述
在这里插入图片描述

事件处理

我们用箭头函数，这样避免刷新this指针，或者在构造函数中，将函数的this指针指向组件的指针，bind，apply，call这些可以完成

条件处理

可以用三元表达式，传参还可以是方法！

    <div id="app"></div>
    <script type="text/babel">javascript">
        function Login(props){
            return <button onClick={props.updateUser}>Login</button>
        }
        function Logout(props){
            return <button onClick={props.updateUser}>Logout</button>
        }
        class App extends React.Component{
            state={
                isLogin:false
            }
            updateUser=()=>{
                // 错误的语法
                // this.state.name='tim'
                this.setState({
                    isLogin:!this.state.isLogin,
                    name:"tom"
                })
            }
            render(){
                const { isLogin }=this.state// 语法糖
                return <div>
                    <h1>Hello，{this.state.name}</h1>
                    {isLogin?<Login updateUser={this.updateUser}/>:<Logout updateUser={this.updateUser}/>}
                    <button onClick={this.updateUser}>更新数据</button>
                </div>
            }
        }
        ReactDOM.render(
            <App name="tom" age="31"/>
            ,document.getElementById("app")
        )
    </script>

列表渲染

一维

    <div id="app"></div>
    <script type="text/babel">javascript">

        class List extends React.Component{
            state={
                list:[1,2,3,4,5]
            }
            render(){
                const arr=this.state.list
                const listItem=[]
                arr.map((item)=>{
                    let li=<li>{item}</li>
                    listItem.push(li)
                })
                return <div>
                   <ul>
                        {listItem}
                    </ul>
                </div>
            }
        }
        ReactDOM.render(
            <List/>
            ,document.getElementById("app")
        )
    </script>

二维

    <div id="app"></div>
    <script type="text/babel">javascript">

        class List extends React.Component{
            state={
                list:[
                    {id:1,text:'Java'},
                    {id:2,text:'JS'},
                    {id:3,text:'Python'},
                    {id:4,text:'PHP'},
                    {id:5,text:'Node'}
                ]
            }
            render(){
                const arr=this.state.list
                const listItem=[]
                arr.map((item)=>{
                    let li=<li key={item.id}>{item.text}</li>
                    listItem.push(li)
                })
                return <div>
                   <ul>
                        {listItem}
                    </ul>
                </div>
            }
        }
        ReactDOM.render(
            <List/>
            ,document.getElementById("app")
        )
    </script>

http://www.niftyadmin.cn/n/1846190.html

相关文章

格式化数量

格式化数量

// 方法一 function formatNum (num, n) {if (typeof num "number") {num String(num.toFixed(n || 0));var re /(-?\d)(\d{3})/;while (re.test(num)) num num.replace(re, "$1,$2");return num;}return num; } formatNum(2313123, 3); // "2,3…
阅读更多...
【STL】map的基本操作

【STL】map的基本操作

map初始化 unordered_map<int,char> mp {{1,1},{2,2},{3,3},{4,4},{5,5},{6,6},{7,7},{8,8},{9,9} };通过key访问map的value unordered_map<int,char> mp cout<<mp[2];向map中添加元素key::value map<string, int> word_count; //法1 word_count[…
阅读更多...
【LeetCode】86、分隔链表

【LeetCode】86、分隔链表

题目描述 给你一个链表的头节点 head 和一个特定值 x &#xff0c;请你对链表进行分隔&#xff0c;使得所有 小于 x 的节点都出现在 大于或等于 x 的节点之前。 你应当 保留 两个分区中每个节点的初始相对位置。 示例1 示例2 题解 我们需要构造两个链表higher和less&#x…
阅读更多...
[Vue框架学习笔记]v-model的实现

[Vue框架学习笔记]v-model的实现

v-model的实现写在前面自己的理解代码示例&#xff1a;father.vuechild.vue写在前面 认识流于表面&#xff0c;也就无法体会真正的意义了&#xff01;今天我们就一起来研究一下v-model&#xff01; v-model的双向绑定到底是如何实现的呢&#xff1f; 如果我们要写自己的小组件…
阅读更多...
测试质数

测试质数

function isPrime(n){return !(/^.?$|^(..?)\1$/).test(1.repeat(n)) }
阅读更多...
[Webpack学习笔记]快速入门webpack

[Webpack学习笔记]快速入门webpack

webpackwebpack定义webpack初体验基础框架配置webpack手动创建html很麻烦&#xff01;使用HtmlWebpackPlugin每次都要重新打包很麻烦~&#xff01;使用webpack-dev-server使用ES6配置babel随着大前端开发的时代到来&#xff01;前端要完成的事情越来越多&#xff01;现代Web开发…
阅读更多...
【蓝桥杯】第十届蓝桥杯软件类个人省赛C/C++B组

【蓝桥杯】第十届蓝桥杯软件类个人省赛C/C++B组

A&#xff1a;组队 问题 作为篮球队教练&#xff0c;你需要从以下名单中选出 1 号位至 5 号位各一名球员&#xff0c;组成球队的首发阵容。 每位球员担任 1 号位至 5 号位时的评分如下表所示。请你计算首发阵容 1 号位至 5 号位的评分之和最大可能是多少&#xff1f; 解答 手…
阅读更多...
[Node.js学习笔记]Express框架路由和托管静态文件

[Node.js学习笔记]Express框架路由和托管静态文件

今天继续了解一下Express路由普通语法特殊语法路由参数托管静态文件普通写法express语法路由 1.路由&#xff1a;就是网址2.路由参数&#xff1a;网址参数 普通语法 /** Author: 41* Date: 2021-11-06 10:56:59* LastEditors: 41* LastEditTime: 2021-11-06 11:16:48* Descr…
阅读更多...
最新文章

Copyright @ 2022~2023