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

最新推荐文章于 2025-08-25 21:39:12 发布

原创最新推荐文章于 2025-08-25 21:39:12 发布 · 415 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #javascript #ecmascript

React框架学习笔记专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了React入门所需的环境准备，包括Node.js的安装和使用，以及NPM和Yarn的比较。接着深入讲解了React的基本概念，如声明式编程、组件化、JSX等，并通过编写HelloWorld实例展示了React元素渲染、组件和Props的使用。此外，还涵盖了React生命周期、事件处理、条件渲染和列表渲染等核心知识点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

        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>