react基础_react app.js

React Fiber： react16之后的版本

react环境搭建

1.安装node，（安装了node，自动安装npm）
2.打开react官网https://reactjs.org

使用脚手架快速生成一个react项目

执行红框内的代码，可以快速生成一个react项目

项目工程代码精简

react项目的入口src目录下面的index.js文件，它引入了app.js文件，app.js文件显示出了首页内容

什么是组件

react是一个基于组件开发的框架

把页面的每个模块都可以看作组件，组件就是网页的一部分。

index.js项目入口文件：
App 组件，在react当中，以大写字母开头，都是一个组件
引入React库，就知道了文件里大写的内容都是组件，引入了react的意义在于让我们能够理解像这个组件的语法。

ReactDom的库可以让我们组件挂载到页面上DOM节点上，挂载到public文件下的index.html文件中，（加载一个组件，并把组件渲染到页面上）

App.js :定义一个react组件
定义一个类叫App（实际上是一个组件），这个类继承从react库里面引入的一个Component类，render出去的内容就是这个组件要显示的内容。

简单的JSX语法

app组件，直接使用标签的语法叫做JSX语法，引入组件直接使用标签的结构

{}里面可以js表达式，不能写语句

编写TodoList功能

为什么会报错呢
render函数return 出去的内容只能是一个大的JSX，所以要将两个JSX区块包裹在一个大的JSX里面

给button绑定事件，this指向的是当前组件

import React from 'react'


class  TodoList extends React.Component {
// 组件被创建的瞬间，会执行构造函数
  constructor (props) {
    super(props) // super做一些初始化
    this.state = {  // state存储数据项
      list: ['learn react', 'learn english']
    }
  }
  render () {
    return (
      <div>
      <div>
        <input/>
        <button onClick={this.handleButtonClick.bind(this)}>add</button>
      </div>
      <ul>
        {
          this.state.list.map((item, index)=> {
            return <li key={index}>{item}</li>
          })
        }
      </ul>
      </div>
    );
  }

  handleButtonClick () {
    // this.state.list.push('hello world')// 修改react的方法，不要直接这样调用，数据不响应
    this.setState({
      list: [...this.state.list, 'hello world']
    }) 
  }
}

export default TodoList;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

难点一：this指向的问题：<button onClick={this.handleButtonClick.bind(this)}>add</button>
如果不绑定的话，handleButtonClick里面操作this.state…,这里的this指向的是button，而不是组件，这样的话就不能调用组件的state数据

难点二：修改数据要用react规定的方法，this.setState…

完成新增列表的功能

  handleButtonClick () {
    // this.state.list.push('hello world')// 修改react的方法，不要直接这样调用，数据不响应
    this.setState({
      list: [...this.state.list, this.state.inputValue]
      inputValue: ''// 清空输入框
    }) 
  }
  handleInputChange (e) {
    console.log(e.target.value)
    this.setState({
      inputValue: e.target.value
    })
  }
1
2
3
4
5
6
7
8
9
10
11
12
13

删除列表功能实现

点击列表项被删除

<li key={index} onClick={this.handleItemClick.bind(this, index)}>{item}</li>
  handleItemClick (index) {
    const list = [... this.state.list];
    list.splice(index,  1)
    this.setState({
      list  //键和值相同可以省略
    })
    // 为什么不直接修改this.state.list.splice(index, 1),在react当中，如果我们要操作state里面的数据
   // 我们尽量不要直接去改state里面的数据，我们复制一个副本出来改变。方便调错。
  }
1
2
3
4
5
6
7
8
9
10

React组件的拆分

组件的定义：页面的部分
我们把li的内容拆分成一个组件Todoitem

import React from 'react'
class TodoItem extends React.Component {
    render () {
        return (
          <div>
              {this.props.content}
          </div>
        );
    }
}
export default TodoItem
1
2
3
4
5
6
7
8
9
10
11

然后在Todolist 中去引用

return <TodoItem key= {index} content={item}/>
1

组件中的传值使用props，这是父子组件
父组件使用属性的形式向子组件传递参数，子组件通过props接受参数

子组件向父组件传值

父组件

return <TodoItem key={index} content={item} index={index} delete={this.handleDelete.bind(this)}/>

   handleDelete(index) {
    const list = [... this.state.list];
    list.splice(index,  1)
    this.setState({
      list: list
    })
   }
1
2
3
4
5
6
7
8
9

子组件

    handleDelete () {
        // this.props.index
        // 子组件如果和父组件通信，子组件要调用父组件传递过来的方法。
        this.props.delete(this.props.index)
    }
    render () {
        return (
          <div onClick={this.handleDelete.bind(this)} >
              {this.props.content}
          </div>
        );
    }
1
2
3
4
5
6
7
8
9
10
11
12

代码优化

优化一：bind(this)这种写法，react的性能会有影响，不建议使用
建议在构造函数中去绑定

  constructor (props) {
    super(props) // super做一些初始化
    this.state = {  // state存储数据项
      list: [],
      inputValue: ''
    }
    this.handleInputChange = this.handleInputChange.bind(this)
    this.handleButtonClick = this.handleButtonClick.bind(this)
    this.handleDelete = this.handleDelete.bind(this)
  }     
1
2
3
4
5
6
7
8
9
10

优化二：

return 子组件的时候，子组件放在括号内，可以多行的去展示属性
优化三：
对于比较长的代码可以拆出来

  getTodoItems () {
    return (
      this.state.list.map((item, index)=> {
        // return <li key={index} onClick={this.handleItemClick.bind(this, index)}>{item}</li>
        return (
        <TodoItem
          key={index}
          content={item}
          index={index}
          delete={this.handleDelete}/>
        ) 
      })
    ) 
  }


      <ul>
        {
          this.getTodoItems()
        }
      </ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

react项目中如何使用c s s样式修饰

新增css样式
1.在标签上。使用对象的形式：style={{background:red}}
2.使用class的形式：不建议在样式上使用class，因为和定义组件的关键词冲突，要使用className

定义css文件，在入口文件引用

如果不想用多余的div包裹