开发: 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 UI库，用于构建高效、快速的用户界面。它是一个轻量级库，因此很受欢迎。它遵循组件设计模式、声明式编程范式和函数式编程概念，以使前端应用程序更高效。它使用虚拟DOM来有效地操作DOM。它遵循从高阶组件到低阶组件的单向数据流。

命令式编程和声明式编程

声明式编程: 是一种编程范式，它关注的是你要做什么，而不是如何做。它表达逻辑而不显式地定义步骤。这意味着我们需要根据逻辑的计算来声明要显示的组件。它没有描述控制流步骤。声明式编程的例子有HTML、SQL等

声明式编程: 函数式编程是声明式编程的一部分。javascript中的函数是第一类公民，这意味着函数是数据，你可以像保存变量一样在应用程序中保存、检索和传递这些函数。

简单来说就是:

告诉计算机怎么做（How） - 过程

告诉计算机我们要什么（What） - 结果

React的基本使用

1.初始React

代码:

<body>
    <div id="root"></div>

    <script>
        /*
            React.js 提供 核心代码
            ReactDOM 提供了与浏览器交互的DOM功能: 如 虚拟DOM
            ReactDOM.render(element, container[, callback])
            element：要渲染的内容
            container：要渲染的内容存放容器
            callback：渲染后的回调函数 
        */ 
        ReactDOM.render(
            '今天天气有点阴',
            document.querySelector('#root'),
            ()=>{
                console.log('成功渲染在页面上')
            }
        )
    </script>
</body>

效果:

在这里插入图片描述

2.利用React创建试图

代码:

<body>
    <div id="root"></div>

    <script>
        /*
            React.js 提供 核心代码
            ReactDOM 提供了与浏览器交互的DOM功能: 如 虚拟DOM

            ReactDOM.render(element, container[, callback])
            element：要渲染的内容
            container：要渲染的内容存放容器
            callback：渲染后的回调函数 

            React.createElement(type,props,children)
            第一个参数是必填,传入的是似HTML标签名称,如: ul, li
            第二个参数是选填,表示的是属性,如: className
            第三个参数是选填,子节点,如: 要显示的文本内容
        */ 
        let h1 = React.createElement('h1',null,'我是一个react标题')
        let p = React.createElement('p',null,'我是一个react段落标签')
        let el = React.createElement(
            "header",
            {id:"header"},
            h1,p
        )

        ReactDOM.render(
            el,
            document.querySelector('#root'),
            ()=>{
                console.log('成功渲染在页面上')
            }
        )
    </script>

效果:

在这里插入图片描述

3.React的JSX

代码:

<body>
    <div id="root"></div>
    
    <script type="text/babel">
        /*
           JSX: 基于 javascript 和 XML 的扩展语法
           注意:要在 script 标签上写 type="babel" 来解析XML语言
        */ 
        ReactDOM.render(
            <header>
                <h1>hello react</h1>
                <p>利用JSX来渲染数据</p>
            </header>,
            document.querySelector('#root'),
            ()=>{
                console.log('成功渲染在页面上')
            }
        )
    </script>
</body>

效果:

在这里插入图片描述

4.差值表达式

代码:

<body>
    <div id="root"></div>
    
    <script type="text/babel">
        /*
           JSX: 基于 javascript 和 XML 的扩展语法
        */ 
        // 各种数据的插值状态
        // let data = '天气还不错'  // 原样输出
        // let data = 1  // 原样输出
        // let data = false  // 不输出
        // let data = undefined  // 不输出
        // let data = null  // 不输出
        // let data = ['内容1','内容2','内容3']  // 去掉逗号原样输出
        let data = {       // 直接使用不可输出, 要使用点的方式来使用
            name:'大大大',  // data.name  data.age
            age:18
        }
        let str = "今天天气不怎么样"
        ReactDOM.render(
            <header>
                <h1>{data.name}</h1>
                <h1>{data.age}</h1>
                <h1>hello react  {str}</h1>
                <p>利用JSX来渲染数据</p>
            </header>,
            document.querySelector('#root'),
            ()=>{
                console.log('成功渲染在页面上')
            }
        )
    </script>
</body>

效果:

在这里插入图片描述

5.条件输出

代码:

<body>
    <div id="root"></div>
    
    <script type="text/babel">
        // 条件输出
        // ? :  类似 if..else
        // ||   类似 if(!)  取反
        // &&   类似 if()
        ReactDOM.render(
            <header>
                <h1>{false ? '成立' : '不成立'}</h1>
                <h1>{true || '正确'}</h1>   {/*短路效果*/}
                <h1>{true && '错误'}</h1>   {/*短路效果*/}
            </header>,
            document.querySelector('#root'),
            ()=>{
                console.log('成功渲染在页面上')
            }
        )
    </script>
</body>

效果:

在这里插入图片描述

6.列表循环

代码:

<body>
    <div id="root"></div>

    <script type="text/babel">
        let data = [
            "内容1",
            "内容2",
            "内容3"
        ]

        // 第一种方式
        // function todata(){
        //     let arr = []
        //     data.forEach(item =>{
        //         arr.push(<li>{item}</li>)
        //     })
        //     return arr
        // }

        ReactDOM.render(
            <ul>
               {/*todata()*/}
               {/*第二种方式*/}
               {
                   data.map(item=>{
                       return <li>{item}</li>
                   })
               }
            </ul>,
            document.querySelector('#root'),
            ()=>{
                console.log('成功渲染在页面上')
            }
        )
    </script>
</body>

效果:

在这里插入图片描述

7.JSX注意事项

代码:

<body>
    <div id="root"></div>

    <script type="text/babel">
        /*
            JSX:
                基于 javaScript 和XML 的扩展语法
                它可以作为值使用
                它并不是字符串
                它也不是html
                它可以配合js 表达式一起使用
                它不可以和JS语句一起使用
                所有的标签名必须是小写
                所有的标签必须闭合，哪怕单标签

                class 要写做 className
                style 接收的是一个对象，并不是字符串
                每次只能输出一个标签(或者说必须要有一个容器)
                唯一父级  唯一容器
        */ 
       let style = {
            width:'600px',
            height:'200px',
            backgroundColor:'red'
       }

       let {Fragment} = React;
        ReactDOM.render(
            // <div>
            //     <div className="box" style={ {width: '100%', height: '100px'} }></div>
            // </div>,
            <Fragment>
                <div className="box" style={style}></div>
            </Fragment>,
            document.querySelector('#root'),
            ()=>{
                console.log('成功渲染在页面上')
            }
        )
    </script>

    <style>
        .box{
            width:200px;
            height:200px;
            background-color:aqua;
        }
    </style>
</body>

效果:

在这里插入图片描述

基于自动化的集成环境模式 - create-react-app - 脚手架

介绍

通过前面 script 的方式虽然也能完成 React.js 的开发，但是有一个现在前端很重要的特性 - 模块化，无法使用。

Create React App 是一个使用 Node.js 编写的命令行工具，通过它可以帮助我们快速生成 React.js 项目，并内置了 Babel、Webpack 等工具帮助我们实现 ES6+ 解析、模块化解析打包，也就是通过它，我们可以使用模块化以及 ES6+ 等更新的一些特性。同时它还内置 ESLint 语法检测工具、Jest 单元测试工具。还有一个基于 Node.js 的 WebServer 帮助我们更好的在本地预览应用，其实还有更多。

这些都通过 Create React App 帮助我们安装并配置好了，开箱即用

安装与使用

通过 npm、yarn、npx 都可以

npm i -g create-react-app
yarn global add create-react-app

安装完成以后，即可使用 create-react-app 命令

create-react-app <项目名称>
或者通过 npx 的方式
npx create-react-app <项目名称>

项目目录结构说明

运行命令以后，就会在运行命令所在目录下面创建一个以项目名称为名的目录

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

关于其他的一些命令(如: 启动, 打包命令)请进入 package.json 文件进行查看

React组件案例实例

创建一个新的 FriendList.js 文件

// FriendList.js 文件

import React,{Component} from 'react';
import './FriendList.css' // 引入样式文件

class FriendList extends Component {
    render(){
        return (
            <div className="friend-list">
                <div className="friend-group">
                    <dt>家人</dt>
                    <dd>爸爸</dd>
                    <dd>妈妈</dd>
                </div>
                <div className="friend-group">
                    <dt>朋友</dt>
                    <dd>张三</dd>
                    <dd>李四</dd>
                    <dd>王五</dd>
                </div>
                <div className="friend-group">
                    <dt>客户</dt>
                    <dd>阿里</dd>
                    <dd>腾讯</dd>
                    <dd>头条</dd>
                </div>
            </div>
        )
    }
}

export default FriendList // 向外暴露文件

创建一个新的 FriendList.css 文件

.friend-list {
    border: 1px solid #000000;
    width: 200px;
}
.friend-group dt {
    padding: 10px;
    background-color: rgb(64, 158, 255);
    font-weight: bold;
}
.friend-group dd {
    padding: 10px;
    /* display: none; */
}
.friend-group.expanded dd {
    display: block;
}
.friend-group dd.checked {
    background: green;
}

最后在 App.js 文件中类显示到页面上

import React,{Component} from 'react';
import FriendList from './FriendList'
/*
  类组件: 
  1.组件类必须继承 React.Component
  2.组件类必须有 render 方法
  3.在render方法中的return 里面定义组件的内容
  注意:记得导出模块
*/

class App extends Component {
  render() {
    return (<div> 
            <FriendList />
          </div>)
  }
}

export default App;

效果:

在这里插入图片描述

组件复用 - 数据抽取(优化案例)

为了提高组件的复用性，通常会把组件中的一些可变数据提取出来

创建一个新的 data.js 文件,把抽离的数据放入其中

let datas = {
    family: {
        title: '家人',
        list: [
            {name: '爸爸'},
            {name: '妈妈'},
            {name: '儿子'}
        ]
    },
    friend: {
        title: '朋友',
        list: [
            {name: '张三'},
            {name: '李四'},
            {name: '王五'},
            {name: '赵六'}
        ]
    },
    customer: {
        title: '客户',
        list: [
            {name: '阿里'},
            {name: '腾讯'},
            {name: '头条'}
        ]
    }
};

export default datas

在 FriendList.css 文件中创建循环,先循环输出外面一层, 然后把数据发给 dl.js

import React,{Component} from 'react';
import './FriendList.css'
import Dl from './dl'
import data from './data'

class FriendList extends Component {
    render(){
        return (
            <div className="friend-list">
               {
                   Object.keys(data).map((item,index) => {
                       return (
                           <Dl
                            key = {index}
                            name = {item}
                            value = {data[item]}
                           />
                       )
                   })
               }
            </div>
        )
    }
}

export default FriendList

最后在dl.js 文件中接收遍历数据,然后渲染出来

import React,{Component} from 'react';

class Dl extends Component {
    render(){
        let {title,list} = this.props.value;
        return (
            <div className="friend-group">
                <dt>{title}</dt>
                {
                    list.map((item,index) =>{
                        return <dd key={index}> {item.name} </dd>
                    })
                }
            </div>
        )
    }
}

export default Dl

效果:

在这里插入图片描述

React的事件

代码:

class App extends Component {
  state = {
    num:20,
    name:'叮当猫',
    sex:'蓝胖子'
  }

  // 类试组件中定义 constructor 一定需要接收 props, 调用 super()
  // constructor(props){
  //   super(props);
  //   this.state = {
  //     num:0
  //   }
  // }

  // Fn = () =>{
  //   // console.log(this) // 可以使用箭头函数的方式来获取到 this
  //   this.setState({
  //     num:this.num+1
  //   })
  // }

  render() {
    let {num} = this.state;
    return (
          <div> 
            {/*<p>{num}</p>*/}
            <p>{this.state.num}</p>
            <p>{this.state.sex}</p>
            <p>{this.state.name}</p>
            <button onClick={()=>{
              this.setState({
                num:num+1,
                sex:'可爱的蓝胖子'
              })
            }}>
              长一岁  
            </button> 
          </div>
          )
  }
}

效果:

在这里插入图片描述

React的案例(使用事件(优化案例)

只需要改动 dl.js 文件中的代码就可以了

import React,{Component} from 'react';

class Dl extends Component {
    state = {
        isOpen:false
    }

    render(){
        let {title,list} = this.props.value;
        let {isOpen} = this.state;
        return (
            <div className={"friend-group " + (isOpen ? "expanded" : "")}> {/*这里需要加空格*/}
                <dt 
                    onClick={()=>{
                        this.setState({isOpen:!isOpen})
                    }}
                >{title}</dt>
                {
                    list.map((item,index) =>{
                        return <dd key={index}> {item.name} </dd>
                    })
                }
            </div>
        )
    }
}

export default Dl