React 学习笔记

React

1. 脚手架的安装

下载：

npm install -g create-react-app

可能会报错，有可能是因为没有权限，以管理员身份运行，就可以了 。

C:\Windows\system32>npm install -g create-react-app
D:\TEND\node\create-react-app -> D:\TEND\node\node_modules\create-react-app\index.js
+ create-react-app@4.0.1
added 67 packages from 25 contributors in 4.77s

创建项目：

// 创建文件夹
mkdir ReactDemo
// 创建项目
create-react-app demo01
// 进入项目
cd demo01
// 运行项目
npm start

项目目录：

node_modules  包管理文件
public
--- favicon.ico  项目图标
--- index.html  项目页面
--- manifest.json  移动端适配文件
src
--- index.js   项目入口文件
--- index.css  项目的全局样式文件

--- App.js   组件（模块化开发）
--- App.css  组件的样式文件

--- reportWebVitals.js  用于移动端的（离线缓存功能）
--- setupTests.js  DOM 断言的适配器
--- App.test.js  

.gitignore  git 省略文件
package-lock.json  包版本和下载地址管理文件
package.json  项目管理文件
README.md  项目说明文件

你可以在 src 中创建子目录。 为了加快重新构建的速度，Webpack 只处理 src 中的文件。 你需要将任何 JS 和 CSS 文件放在 src 中，否则 Webpack 将发现不了它们。

2. Hello react

1，删除 src 中的所有文件，从头开始写：

2，创建项目的入口文件： index.js

import React from 'react'
import ReactDOM from 'react-dom'
// 导入 App 组件，
import App from './App'

// 把 组件 放到 页面模板上，id 为 root 的元素上
ReactDOM.render(<APP />, document.getElementById('root'))

3，创建 App.js 组件，组件必须以大写开头；

import React, {
    Component } from 'react'

// 等于以下代码
// import React from 'react'
// const Component = React.Component

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

export default App

3. jsx

1. 概念：

​ js 和 xml 结合，遇到 < 就编译为 html 语法， 遇到 {} 就编译为 js 语法；

这个语法，让 react 可以更方便创建 虚拟DOM，创建html结构；

没有 jsx 之前，react 创建虚拟DOM 的方法：

class App extends Component {
   
    render () {
   
        var child1 = React.createElement('li', null, '你好')
        var child2 = React.createElement('li', null, '我是 zyf啊')
        var root = React.createElement('ul', {
   className: 'my-list'}, child1, child2)
    }
}

有 jsx 后就简单的：

class App extends Component {
   
  render () {
   
    // jsx： js 和 xml 结合，遇到 < 就编译为 html 语法， 遇到 {} 就编译为 js 语法；
    return (
      <div>
        <div>Hello zyf</div>
        <ul>
          <li>{
   false ? '你好' : 'false哦'}</li>
          <li>我是 zyf啊</li>
        </ul>
      </div>
    )
  }
}

2. () 的作用：

有了 （） 我们就可以使 html 结构换行显示；

3. Frangment 标签：

在 React 要求必须在组件的最外层进行包裹，可以使用 div 进行包裹 或使用 teact 的 标签；

使用 Fragment 标签后，他不会进行渲染；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ol3d6IVr-1608447252144)(H:\笔记本\images\React\使用 Fragment 标签.png)]

以下是代码， Frangment 标签需要从 react 中导入：

// App 组件
import React, {
    Component, Fragment } from 'react'
import './App.css'

class App extends Component {
   
  render () {
   
    // jsx： js 和 xml 结合，遇到 < 就编译为 html 语法， 遇到 {} 就编译为 js 语法；
    return (
      <Fragment>
        <div>Hello zyf</div>
        <ul>
          <li>{
   false ? '你好' : 'false哦'}</li>
          <li className="my-mane">我是 zyf啊</li>
        </ul>
      </Fragment>
    )
  }
}

export default App

4. 样式使用：

**在 jax 中的 class 样式名称不是 lcass="xxx"，而是 className="xxx"；**因为这个 class 名字可以会和 创建 组件 时的 Class 混乱了 。

// App 组件
import React, {
    Component, Fragment } from 'react'
import './App.css'

class App extends Component {
   
  render () {
   
    return (
      <Fragment>
        <div>Hello zyf</div>
        <ul>
          <li>{
   false ? '你好' : 'false哦'}</li>
          <li className="my-mane">我是 zyf啊</li>
        </ul>
      </Fragment>
    )
  }
}

export default App

5. jsx 代码注释：

JSX中的代码注释是非常有讲究的 ，具体的方法是这样的 {/* xx */}， 而不是 // 或者 /**/：

快捷键是：Ctrl + / (可能不同的编辑器的快捷键不同，可以百度一下)；

看代码咯：

<ul>
  {
    this.state.list.map((item, index) => {
      return (
        <li key={item+index}>
          // 内容   => 错误的
          {item} 
          {/* 删除按钮 */}  => 正确的
          <button
            onClick={this.deleteList.bind(this, index)}>
              删除
          </button>
        </li>
      ) 
    })
  }
</ul>

注意：

• 可能要在 <Frangment> 标签中才能生效；

6. 解析 html 标签：

如果想要把 html 标签解析成 和在html页面上的标签一致的效果，就可以使用 dangerouslySetInnerHTML

<ul>
  {
    this.state.list.map((item, index) => {
      return (
        <li key={item+index} className="d-flex">
          {/* 内容 */}
          <span dangerouslySetInnerHTML={
  {__html: item}}></span>
          {/* 删除按钮 */}
          <button
            onClick={this.deleteList.bind(this, index)}>
              删除
          </button>
        </li>
      ) 
    })
  }
</ul>

7. label 的区别：

label 的作用是：用户点击 labe 中的文字时， 焦点可以自动的定位到 input 元素上面 。

我们按照平时的 html 语法是这样写的：

 render () {
    return (
      <Fragment>
        <label for="inputId">添加学习忍术：</label>
        <input 
            id="inputId" 
            value={this.state.inputValue} 
            onChange={this.inputChange.bind(this)}
         />
        <button onClick={this.addList.bind(this)}>学习忍术</button>
	}
}

但这时，控制台会报错，说要把 for 这个属性改成 htmlFor 这种格式：

 <label htmlFor="inputId">添加学习忍术：</label>
<input 
    id="inputId" 
    value={this.state.inputValue} 
    onChange={this.inputChange.bind(this)}
 />

4. 数据绑定 和 响应式设计

1. 数据绑定

在 组件 class 中使用 constructor 来存放数据，vue 为 data：

主要代码：

  constructor (props) {
   
    super(props)    // 调用父类的构造