react学习笔记

一React中的核心概念

1 虚拟DOM（Virtual DOM）
2 Diff算法（虚拟DOM的加速器，提升React性能的法宝）

1. 虚拟DOM
React将DOM抽象为虚拟DOM，虚拟DOM其实就是用一个JS对象来描述DOM，然后用这个树构建一个真正的 DOM 树，插到文档当中。当状态变更的时候，会重新构造一棵新的对象树。然后用新的树和旧的树进行比较，记录两棵树差异。再构建在真正的DOM树上，视图就更新了
为什么用虚拟dom？
当dom发生更改时需要遍历 而原生dom可遍历属性多大231个 且大部分与渲染无关 更新页面代价太大
2. Diff算法
核心：当你使用React的时候，在某个时间点 render() 函数创建了一棵React元素树，在下一个state或者props更新的时候，render() 函数将创建一棵新的React元素树，React将对比这两棵树的不同之处，计算出如何高效的更新UI（只更新变化的地方）
React中有两种假定
1 两个不同类型的元素会产生不同的树(根元素不同结构树一定不同)
2 开发者可以通过key属性指定不同树中没有发生改变的子元素
具体的Diff算法的说明
a.如果两棵树的根元素类型不同，React会销毁旧树，创建新树
b.对于类型相同的React DOM 元素，React会对比两者的属性是否相同，只更新不同的属性,当处理完这个DOM节点，React就会递归处理子节点
key 属性
React提供了一个 key 属性。当子节点带有key属性，React会通过key来匹配原始树和后来的树。
注意

说明：key属性在React内部使用，但不会传递给你的组件
推荐：在遍历数据时，推荐在组件中使用 key 属性：<li key={item.id}>{item.name}</li>
注意：key只需要保持与他的兄弟节点唯一即可，不需要全局唯一
注意：尽可能的减少数组index作为key，数组中插入元素的等操作时，会使得效率底下

二React的基本使用

1.create-react-app是一个通过npm发布的安装包，在确认Node.js和npm安装好之后，输入下面命令创建。

npm install -g create-react-app

2.安装结束后，使用下面命令创建应用目录。

create-react-app my-app

3.打开目录

cd my-app

4.运行项目

npm start

// 1. 导入 react
import React from 'react'
import ReactDOM from 'react-dom'

// 2. 创建 虚拟DOM
// 参数1：元素名称  参数2：元素属性对象(null表示无)  参数3：当前元素的子元素string||createElement() 的返回值
const divVD = React.createElement('div', {
  title: 'hello react'
}, 'Hello React！！！')

// 3. 渲染
// 参数1：虚拟dom对象  参数2：dom对象表示渲染到哪个元素内 参数3：回调函数
ReactDOM.render(divVD, document.getElementById('app'))

三react实际使用JSX语法

注意

注意：JSX语法，最终会被编译为 createElement() 方法
推荐：使用 JSX 的方式创建组件
JSX - JavaScript XML
安装：npm i -D babel-preset-react （依赖与：babel-core/babel-loader）

JSX的注意点

注意 1: 如果在 JSX 中给元素添加类, 需要使用 className 代替 class
类似：label 的 for属性，使用htmlFor代替
注意 2：在 JSX 中可以直接使用 JS代码，直接在 JSX 中通过 {} 中间写 JS代码即可
注意 3：在 JSX 中只能使用表达式，但是不能出现 语句！！！
注意 4：在 JSX 中注释语法：{/* 中间是注释的内容 */}

四react组建创建

React 组件可以让你把UI分割为独立、可复用的片段，并将每一片段视为相互独立的部分。
组件是由一个个的HTML元素组成的
概念上来讲, 组件就像JS中的函数。它们接受用户输入
（props），并且返回一个React对象，用来描述展示在页面中的内容

react组建创建的两种方式

在es6中class仅仅是一个语法糖，不是真正的类，本质上还是构造函数+原型 实现继承

1 通过 JS函数 创建（无状态组件）
2 通过 class 创建（有状态组件）

两种组建的区别

函数式组件 和 class 组件的使用场景说明：
1 如果一个组件仅仅是为了展示数据，那么此时就可以使用 函数组件
2 如果一个组件中有一定业务逻辑，需要操作数据，那么就需要使用 class 创建组件，因为，此时需要使用 state

javascript函数创建组建

注意：1 函数名称必须为大写字母开头，React通过这个特点来判断是不是一个组件
注意：2 函数必须有返回值，返回值可以是：JSX对象或null
注意：3 返回的JSX，必须有一个根元素
注意：4 组件的返回值使用()包裹，避免换行问题

function Welcome(props) {
  return (
    // 此处注释的写法 
    <div className="shopping-list">
      {/* 此处 注释的写法 必须要{}包裹 */}
      <h1>Shopping List for {props.name}</h1>
      <ul>
        <li>Instagram</li>
        <li>WhatsApp</li>
      </ul>
    </div>
  )
}

ReactDOM.render(
  <Welcome name="jack" />,
  document.getElementById('app')
)

class创建组建

// ES6中class关键字的简单使用

// - **ES6中的所有的代码都是运行在严格模式中的**
// - 1 它是用来定义类的，是ES6中实现面向对象编程的新方式
// - 2 使用`static`关键字定义静态属性
// - 3 使用`constructor`构造函数，创建实例属性
// - [参考](http://es6.ruanyifeng.com/#docs/class)

// 语法：
class Person {
  // 实例的构造函数 constructor
  constructor(age){
    // 实例属性
    this.age = age
  }
  // 在class中定义方法 此处为实例方法 通过实例打点调用
  sayHello () {
    console.log('大家好，我今年' + this.age + '了');
  }

  // 静态方法 通过构造函数打点调用 Person.doudou()
  static doudou () {
    console.log('我是小明，我新get了一个技能，会暖床');
  }
}
// 添加静态属性
Person.staticName = '静态属性'
// 实例化对象
const p = new Person(19)
// 实现继承的方式
class American extends Person {
  constructor() {
    // 必须调用super(), super表示父类的构造函数
    super()
    this.skin = 'white'
    this.eyeColor = 'white'
  }
}

// 创建react对象
// 注意：基于 `ES6` 中的class，需要配合 `babel` 将代码转化为浏览器识别的ES5语法
// 安装：`npm i -D babel-preset-env`

//  react对象继承字React.Component
class ShoppingList extends React.Component {
  constructor(props) { 
    super(props)
  }
  // class创建的组件中 必须有rander方法 且显示return一个react对象或者null
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
        </ul>
      </div>
    )
  }
}

五父子组建传递数据props和state

给组件传递数据 - 父子组件传递数据

*组件中有一个 只读的对象 叫做 props，无法给props添加属性
*获取方式：函数参数 props
*作用：将传递给组件的属性转化为 props 对象中的属性

function Welcome(props){
  // props ---> { username: 'zs', age: 20 }
  return (
    <div>
      <div>Welcome React</div>
      <h3>姓名：{props.username}----年龄是：{props.age}</h3>
    </div>
  )
}
// 给 Hello组件 传递 props：username 和 age(如果你想要传递numb类型是数据 就需要向下面这样)
ReactDOM.reander(<Hello username="zs" age={20}></Hello>, ......)

props

作用：给组件传递数据，一般用在父子组件之间
说明：React把传递给组件的属性转化为一个对象并交给 props
特点：props是只读的，无法给props添加或修改属性
props.children：获取组件的内容，比如：
<Hello>组件内容</Hello> 中的 组件内容

// props 是一个包含数据的对象参数，不要试图修改 props 参数
// 返回值：react元素
function Welcome(props) {
  // 返回的 react元素中必须只有一个根元素
  return <div>hello, {props.name}</div>
}
class Welcome extends React.Component {
  constructor(props) {
    super(props)
  }
  render() {
    return <h1>Hello, {this.props.name}</h1>
  }
}

state状态即数据

作用：用来给组件提供组件内部使用的数据
注意：只有通过class创建的组件才具有状态
注意：状态是私有的，完全由组件来控制
注意：不要在 state 中添加 render() 方法中不需要的数据，会影响渲染性能！

可以将组件内部使用但是不渲染在视图中的内容，直接添加给 this
注意：不要在 render() 方法中调用 setState() 方法来修改state的值 
但是可以通过 this.state.name = 'rose' 方式设置state（不推荐!!!!）

// 例：
class Hello extends React.Component {
  constructor() {
    // es6继承必须用super调用父类的constructor
    super()

    this.state = {
      gender: 'male'
    }
  }
  render() {
    return (
      <div>性别：{ this.state.gender }</div>
    )
  }
}

jsx语法转化

// 1、JSX
const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
)
// 2、JSX -> createElement
const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
)
// React elements: 使用对象的形式描述页面结构
// Note: 这是简化后的对象结构
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
  },
  children: ['Hello, world']
}

六组建生命周期

组件的生命周期包含三个阶段：创建阶段（Mounting）、运行和交互阶段（Updating）、卸载阶段（Unmounting）

Mounting

constructor() 
componentWillMount() 
render() 
componentDidMount()

Updating

componentWillReceiveProps() 
shouldComponentUpdate() 
componentWillUpdate() 
render() 
componentDidUpdate()

Unmounting

componentWillUnmount()

A.建阶段(Mounting)

特点：该阶段的函数只执行一次
constructor()
作用：1 获取props 2 初始化state
说明：通过 constructor() 的参数props获取
设置state和props

class Greeting extends React.Component {
  constructor(props) {
    // 获取 props
    super(props)
    // 初始化 state
    this.state = {
      count: props.initCount
    }
  }
}

// 初始化 props
// 语法：通过静态属性 defaultProps 来初始化props
Greeting.defaultProps = {
  initCount: 0
};

componentWillMount()

说明：组件被挂载到页面之前调用，其在render()之前被调用，因此在这方法里同步地设置状态将不会触发重渲染
注意：无法获取页面中的DOM对象
注意：可以调用 setState() 方法来改变状态值
用途：发送ajax请求获取数据

componentWillMount() {
  console.warn(document.getElementById('btn')) // null
  this.setState({
    count: this.state.count + 1
  })
}

render()

作用：渲染组件到页面中，无法获取页面中的DOM对象
注意：**不要在render方法中调用 setState() 方法，否则会递归渲染**
原因说明：状态改变会重新调用render()，render()又重新改变状态

render() {
  console.warn(document.getElementById('btn')) // null

  return (
    <div>
      <button id="btn" onClick={this.handleAdd}>打豆豆一次</button>
      {
        this.state.count === 4
        ? null
        : <CounterChild initCount={this.state.count}></CounterChild>
      }
    </div>
  )
}

componentDidMount()

1 组件已经挂载到页面中
2 可以进行DOM操作，比如：获取到组件内部的DOM对象
3 可以发送请求获取数据
4 可以通过 setState() 修改状态的值
注意：在这里修改状态会重新渲染

componentDidMount() {
  // 此时，就可以获取到组件内部的DOM对象
  console.warn('componentDidMount', document.getElementById('btn'))
}

B.组件生命周期 - 运行阶段（Updating）
C组件生命周期 - 卸载阶段（Unmounting）
componentWillUnmount()

作用：在卸载组件的时候，执行清理工作，比如
1 清除定时器
2 清除componentDidMount创建的DOM对象

七state和setState（异步操作）

注意：使用 setState() 方法修改状态，状态改变后，React会重新渲染组件
注意：不要直接修改state属性的值，这样不会重新渲染组件！！！
使用：1 初始化state 2 setState修改state

// 修改state（不推荐使用）
this.state.test = '这样方式，不会重新渲染组件';

constructor(props) {
  super(props)

  // 正确姿势！！！
  // -------------- 初始化 state --------------
  this.state = {
    count: props.initCount
  }
}

componentWillMount() {
  // -------------- 修改 state 的值 --------------
  // 方式一：
  this.setState({
    count: this.state.count + 1
  })

  this.setState({
    count: this.state.count + 1
  }, function(){
    // 由于 setState() 是异步操作，所以，如果想立即获取修改后的state
    // 需要在回调函数中获取
    // https://doc.react-china.org/docs/react-component.html#setstate
  });

  // 方式二：
  this.setState(function(prevState, props) {
    return {
      counter: prevState.counter + props.increment
    }
  })

  // 或者 - 注意： => 后面需要带有小括号，因为返回的是一个对象
  this.setState((prevState, props) => ({
    counter: prevState.counter + props.increment
  }))
}

八绑定事件

1 通过React事件机制 onClick 绑定
2 JS原生方式绑定（通过 ref 获取元素）
注意：ref 是React提供的一个特殊属性
ref的使用说明：react ref

onClick 用来绑定单击事件

<input type="button" value="触发单击事件"
  onClick={this.handleCountAdd}
  onMouseEnter={this.handleMouseEnter}
/>

九样式style

// 1. 直接写行内样式：
<li style={{border:'1px solid red', fontSize:'12px'}}></li>

// 2. 抽离为对象形式
var styleH3 = {color:'blue'}
var styleObj = {
  liStyle:{border:'1px solid red', fontSize:'12px'},
  h3Style:{color:'green'}
}

<li style={styleObj.liStyle}>
  <h3 style={styleObj.h3Style}>评论内容：{props.content}</h3>
</li>

// 3. 使用样式表定义样式：
import '../css/comment.css'
<p className="pUser">评论人：{props.user}</p>

十事件中的this

1 通过 bind 绑定
2 通过 箭头函数 绑定
通过bind绑定
原理：bind能够调用函数，改变函数内部this的指向，并返回一个新函数
说明：bind第一个参数为返回函数中this的指向，后面的参数为传给返回函数的参数

// 自定义方法：
handleBtnClick(arg1, arg2) {
  this.setState({
    msg: '点击事件修改state的值' + arg1 + arg2
  })
}

render() {
  return (
    <div>
      <button onClick={
        // 无参数
        // this.handleBtnClick.bind(this)

        // 有参数
        this.handleBtnClick.bind(this, 'abc', [1, 2])
      }>事件中this的处理</button>
      <h1>{this.state.msg}</h1>
    </div>
  )
}

在构造函数中使用bind

constructor() {
  super()

  this.handleBtnClick = this.handleBtnClick.bind(this)
}
// render() 方法中：
<button onClick={ this.handleBtnClick }>事件中this的处理</button>

通过箭头函数绑定
原理：箭头函数中的this由所处的环境决定，自身不绑定this

<input type="button" value="在构造函数中绑定this并传参" onClick={
  () => { this.handleBtnClick('参数1', '参数2') }
} />
handleBtnClick(arg1, arg2) {
  this.setState({
    msg: '在构造函数中绑定this并传参' + arg1 + arg2
  });
}

受控组建
1 表单元素
2 由React通过JSX渲染出来
3 由React控制值的改变，也就是说想要改变元素的值，只能通过React提供的方法来修改
注意：只能通过setState来设置受控组件的值

// 模拟实现文本框数据的双向绑定
<input type="text" value={this.state.msg} onChange={this.handleTextChange}/>

// 当文本框内容改变的时候，触发这个事件，重新给state赋值
handleTextChange = event => {
  console.log(event.target.value)
  this.setState({
    msg: event.target.value
  })
}