Easy的React学习笔记（一.基础）

最新推荐文章于 2022-07-08 16:43:28 发布

置顶

Easy_Lee_willpower

最新推荐文章于 2022-07-08 16:43:28 发布

阅读量476

点赞数 3

分类专栏： react 前端开发 jsx

本文链接：https://blog.csdn.net/qq_37279880/article/details/102487420

版权

1_开发环境搭建

2_用命令create-react-app （脚手架）创建项目目录demo1

3_通过组件化开发输出helloworld

4_JSX语法

5_小姐姐服务页面（Xiaojiejie.js）编写

6_React响应式设计原理与数据的绑定方法、增加服务项

需求Z：

this.state:react中用来控制组件内部状态的数据

9_jsx中几个要注意的地方：代码注释、css的class陷阱、html解析问题dangerouslySetInnerHTML属性、label标签的for

1.代码注释：

2.jsx中css的class陷阱，应为className

3.html解析问题的：dangerouslySetInnerHTML属性

4.label标签的htmlFor

10_react快速生成代码插件：Simple React Snippets

11_组件拆分

12_父子组件相互传值

1.父组件向子组件传值：在子组件加上属性的形式。

2.子组件操作父组件数据(实际上是父组件向子组件传方法)：在子组件加上属性的形式。

父组件向子组件传方法：

①父组件向子组件传值、子组件向父组件传值(父组件向子组件传方法)都是在子组件加上属性的形式实现的，然后通过this.props.属性名的方式访问。

this.props：

React中，使用外部（被传入传入的）数据（通过 this.props 访问），被传入的数据可在组件中通过 this.props 在 render() 访问。

注释：（props:属性properties）

this.state：

组件还可以维护其内部的有状态的数据（通过 this.state 访问）。

注释：（state :状态；有状态的数据）

②调用方法时要绑定this指向，可以直接在调用处bind绑定，但是更好的是在组件构造函数内绑定，这样有助于性能优化。

13_React的单项数据流、函数式编程

1.单项数据流

2.函数式编程

14_react developer tools的安装与使用

1.安装详见我另一篇博客：

2.react developer tools插件的三种状态

3.使用

由于本学习笔记过长，图片较多，编辑器打字时有些卡顿，所以之后内容写在另一篇博客：

1_开发环境搭建

①前往http://nodejs.cn/，找到自己电脑适合的版本下载并安装node.js。

②win键+r（运行），cmd打开命令行。

输入相关命令检查node.js是否安装成功，显示nodejs与npm对应的版本即为安装成功。

安装node主要为了使用npm包管理工具。

③安装官方脚手架工具create-react-app。

若无法安装create-react-app（安装失败），

可尝试更换网络环境后重新安装，若还是失败，排除网络因素后，则以管理员身份运行cmd（命令提示符）后成功安装create-react-app

看到安装了91个包就表示安装成功。

2_用命令create-react-app （脚手架）创建项目目录demo1

创建失败：

解决方法：

同样以管理员身份运行cmd（命令提示符），重新输入命令create-react-app 创建项目demo1

成功用create-react-app创建demo1，可以看到demo1里面有许多脚手架生成的文件。

根据命令提示运行我的第一个react文件

3_通过组件化开发输出helloworld

把src目录里面的文件全部删掉，然后新建index.js（入口文件）与App.js（方法组件，React核心之一就是组件化开发）

入口文件index.js代码如下（用ReactDOM的render渲染语法把APP模块渲染到public\index.html中的root上）：

import React from 'react'  //要用react所以引入react
import ReactDOM from 'react-dom' //要操作dom所以引入react-dom
import App from './App' //组件化开发，有了App组件后就可以通过reactdom的render方法在public\index.html的rootID上渲染出来

ReactDOM.render(<App />,document.getElementById('root'))  //用react语法把App组件render到index.html中id为root的标签上

注意此时index.js中的三句导入都是导入默认组件，React、ReactDOM、App这三个组件名都是自己取得，取ABC也可以，但是为了做到望文生义，以固定写法比较好。其中React、ReactDOM是导入默认组件，App是导入的自定义组件（必须以大写字母开头）。

组件App.js代码如下（React中自定义组件名必须以大写字母开头，例如本例的App组件必须大写字母开头，不然会报错）：

import React,{Component} from "react"
// import React from 'react'
// Const Component = React.Component即import {Component} from 'react'
// 这里是es6解构赋值的写法，即Component等于React.Component
class App extends Component{
    render(){
        return (
            <div>
                 Hello,EasyLee
                <ul className='my_list'>
                    <li>{true ? 'i love coding' : 'i love eating' }</li>
                    <li>i love react</li>
                </ul>
            {/* 上述jsx代码相当于如下js代码：
             var child1 = React.createElement('li',null,'i love coding');
             var chidl2 = React.createElement('li',null,'i love react');
             var chidl3 = React.createElement('ul',{className='my_list'},child1,child2); */}
            </div>
            
        )
    }
}
export default App;//在index.js文件中要引用App组件所以最后要用export default暴露（输出）App组件。

在index.js文件中要引用App组件所以最后要用export default暴露（输出）App组件。

疑问：可以把import React,{Component} from 'react'中的Component改成a吗？

答：不能，Component是react的成员组件，react官方自己定义好的，所以不能锁边取一个名字。

public目录下模板文件index.html代码如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="logo192.png" />
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <title>EasyLee WEB</title>
  </head>
  <body>
    <noscript>需要开启JavaScript.</noscript>
    <div id="root"></div>
  </body>
</html>

有几点（①②③④）要注意：

①入口文件index.js与组件App.js导入的头部文件不同，：

入口文件index.js头部通常由三部分组成：导入react默认组件、导入ReactDOM、导入自定义组件。

②入口文件index.js与组件App.js导入的底部代码不同：

入口文件index.js下方把自定义组件（以App为例）通过ReactDOM.render渲染到index.html文件上。

自定义组件App.js底部要通过export default 语句导出。

index.js（入口文件）：

import React from "react"//①要用react所以引入react
import ReactDOM from "react-dom"//②要操作dom所以引入react-dom
import App from "./App"//③导入自定义组件

ReactDOM.render(<App />,document.getElementById('root'))

App.js（自定义组件以App.js为例，底部要通过export default 语句导出）：

import React,{Component} from "react"
// import React from 'react'
// Const Component = React.Component即import {Component} from 'react'
// 这里是es6解构赋值的写法，即Component等于React.Component
export default App;//底部导出自定义组件

③自定义组件名首字母必须大写，如App。

④牢记自定义组件的语法结构，以App.js组件为例：

import React,{Component} from "react"
class App extends Component{
    render(){
        return (
            <div>

            </div>        
        )
    }
}
export default App;//底部导出自定义组件

4_JSX语法

JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到<，JSX就当作HTML解析，遇到{就当JavaScript解析.

import React,{Component} from 'react'
// import React from 'react'
// Const Component = React.Component即import {Component} from 'react'
// 这里是es6解构赋值的写法，即Component等于React.Component
class App extends Component{
    render(){
        return (
            <div>
                {/* Hello,EasyLee! */}
                <ul className='my_list'>
                    <li>{true ? 'i love coding' : 'i love eating' }</li>
                    <li>i love react</li>
                </ul>
            </div>
            
        )
    // 上述jsx代码相当于如下js代码：
    //         var child1 = React.createElement('li',null,'i love coding');
    //         var chidl2 = React.createElement('li',null,'i love react');
    //         var chidl3 = React.createElement('ul',{className='my_list'},child1,child2);
    }
}
export default App;

其中 createElement(a, b, c)方法用法如下：

①参数 a：表示元素的类型，比如：h1, div 等。

②参数 b：表示该元素上的属性，使用 JavaScript 对象方式表示。

③参数 c：表示该元素内部的内容（子元素），可以是文字，可以继续嵌套另外一个 React.createElement(a, b, c)。

这种方法其实在实际 React 开发中几乎不会使用，因为可以直接用JSX语法。

5_小姐姐服务页面（Xiaojiejie.js）编写

疑问：为何每个自定义组件都要引入React？

答：因为webpack在解析jsx的时候会把下面代码的Component解析成React.Component这个方法，假如他发现没有引入React，就会报错。

Xiaojiejie.js代码如下：

import React,{Component} from 'react'
class Xiaojiejie extends Component{
    render(){
        return (
        <div>   
            <input /><button>增加服务</button>
            <ul>
                <li>服务1</li>
                <li>服务2</li>
            </ul>   
        </div> 
        )

    }
}
export default Xiaojiejie;

在index.js中加入如下代码：

ReactDOM.render(<Xiaojiejie />,document.getElementById('xiaojiejie'))

在index.html中加入如下代码：

    <div id="xiaojiejie"></div>

加入Xiaojiejie.js后运行效果如图所示:

问：由于React要求必须在一个组件的最外层进行包裹，如下图的光标处的div,不加就会报错，但是在Flex布局中，return内最外层包裹div会影响布局，Flex布局中最外层不能有包裹，这时候怎么办呢?

答：Flex布局中<div>由<Fragment>替代，不过记得要在头部多引入react的成员组件Fragment(注意成员组件Fragment的首字母是大写的，引入和使用Fragment标签时要注意):

import React,{Component,Fragment } from 'react'

class Xiaojiejie extends Component{
    render(){
        return(
            <Fragment>  {/*注意Fragment标签首字母大写*/}
               <div>
                <input />
                <button>增加服务</button>
                </div>
                <ul>
                    <li>服务1</li>
                    <li>服务2</li>
                </ul>
            </Fragment>
        )
    }
}

6_React响应式设计原理与数据的绑定方法、增加服务项

Reac

最低0.47元/天解锁文章

Easy_Lee_willpower

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
Easy的React学习笔记（一.基础）

1_开发环境搭建①前往http://nodejs.cn/，找到自己电脑适合的版本下载并安装node.js。②win键+r（运行），cmd打开命令行。输入相关命令检查node.js是否安装成功，显示nodejs与npm对应的版本即为安装成功。安装node主要为了使用npm包管理工具。③安装官方脚手架工具create-react-app。若无法安装create-react-...
复制链接

扫一扫