React 基础知识

Nian糕

修改于 2024-03-16 16:07:38

5970

修改于 2024-03-16 16:07:38

在正式讲解 React 之前，我们需要对 WebPack 部分做一个简单的介绍，而 WebPack 0 基础的同学，可以先参考 WebPack 模块化打包工具（上）、WebPack 模块化打包工具（下）这两篇文章的讲解，再进行 React 的学习

WebPack

app 文件夹主要存放着我们项目的代码，static文件夹存放静态资源文件，util文件夹存放工具函数，index.jsx为 React 的入口文件，index.tmpl.html为模板文件，app.js是我们项目的业务代码， vendor.js为第三方依赖包，webpack.config.js为开发时的配置文件，webpack.production.config.js为发布时的配置文件

在开发过程中，我们可以不用考虑系统的性能，更多考虑的是如何增加开发效率，所以我们会把所有的代码，统一打包为bundle.js文件，但若是将项目上线，我们就需要考虑系统的加载速度、缓存等等因素，所以我们会把业务代码和第三方依赖包的代码分开打包，分别对应app.js和vendor.js文件，这样做的好处是，当我们进行项目的更新时，只需要更新app.js文件即可

因为我是在 Mac OS 环境下进行开发的，所以使用 Windows 进行开发的同学需要修改package.json文件里的 scripts 配置项，在NODE_ENV前加上set，在webpack-dev-server和webpack --config前加上&&，如下所示

"scripts": {
    "start": "set NODE_ENV=dev && webpack-dev-server --progress --colors",
    "build": "rm -rf ./build && set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress --colors"
},

另外，如果运行npm run build出现报错，那就手动创建一个build文件夹

我们接下来讲解一下这两个命令作用，代码中NODE_ENV=dev代表当前是开发环境下，这里的dev可被 JS 代码中的process.env.NODE_ENV 得到并做一些其他处理，而NODE_ENV=production则标识的是开发环境

// webpack.production.config.js
new webpack.DefinePlugin({ 
    __DEV__: JSON.stringify(JSON.parse((process.env.NODE_ENV == 'dev') || 'false')) 
})

npm start默认使用webpack.config.js作为配置文件，而npm run build强制使用webpack.production.config.js作为配置文件

关于其他地方的描述，看代码注释即可，然后我们运行npm start命令就可以 Hello World 了

Hello 组件

// index.jsx
import React from 'react'
import { render } from 'react-dom'

// 定义组件
class Hello extends React.Component {
    render() {
        // return 里面写jsx语法
        return (
            <p>Hello World</p>
        )
    }
}

// 渲染组件到页面
render(
    <Hello/>,
    document.getElementById('root')
)

上面是我们上一小结所讲解的例子，下面来详细讲解每一行代码的含义，import React from 'react'这段代码的含义，是引用了node_modules文件夹里的react依赖包，而import { render } from 'react-dom'又较上一行代码多了一个大括号，在这里render()是一个函数，需要使用大括号括起来，大括号里面还可以写 JS 的变量和三元表达式，若是遇到两个大括号{{ hello }}，则第一层大括号定义了这是一个 JS 变量，第二层大括号则是这个 JS 变量中的对象

class Hello extends React.Component {
    render(){
        var s = {
            color: '#fff',
            fontSize: '20px'
        }
        return (
            <div>
                <p style={s}>Nian糕</p>
            </div>
        )
    }
}

React.Component是我们所引用的react包里所定义的一个方法，大家可以通过阅读react包里的源码进行了解，随后我们通过render()进行组件的渲染，第一个render()是向外渲染一个段落，而第二个render()则是将Hello组件渲染到页面上

jsx 语法

React 里面写模板要使用到 jsx 语法，这是它的几个特点：a. jsx 中不能一次性返回零散的多个节点，需要使用一个父节点包裹；b. 用{/* */}的注释形式；c. 使用className代替class，样式名采用驼峰式写法；d. 函数执行事件时，this指组件本身

class Hello extends React.Component {
    render(){
        return ( 
            <div>
                {/* 注释 */}
                <p className="n1">Nian糕_1</p>
                <p style={{color:'#ccc',fontSize:'20px'}}>Nian糕_2</p>
                <p>Nian糕_3</p> 
            </div> 
        )
    }
}

render(){
    return (
        <p onClick={this.clickText.bind(this)}>Nian糕</p>
    )
}
clickText(e) {
    e.preventDefault();
    console.log(this);
}

循环，在 jsx 中使用循环，一般会用到Array.prototype.map，arr.map是包裹在{}中的，这里需要返回多个<li>，给每个<li>赋值key={index}有助于 React 的渲染优化，jsx 中的{}可放一个可执行的 JS 程序或者变量

render() {
    const arr = ['Nian糕_1', 'Nian糕_2', 'Nian糕_3']
    return (
        <div>
            <ul>
                {arr.map((item, index) => {
                    return <li key={index}>this is {item}</li>
                })}
            </ul>
        </div>
    )
}

判断，jsx 中使用判断一般会用到三元表达式（表达式也是放在{}中的）

render(){
    return (
        <div>
            {
                true
                ? <p>Nian糕_true</p>
                :<p>Nian糕_false</p>
            }
        </div>
    )
}