React基础

1. 搭环境create-react-app [项目名]
2. createElement，JSX其实只是一种语法糖,最终会通过babel转译成createElement语法

<div>123</div>
==>
React.createElement(
  "div",
  null,
  "123"
);
复制代码

3. ReactDOM.render将React.createElement生成的虚拟dom转化成真实dom
4. 区分js和html是根据< html和{ js来判断
5. jsx和html不同的地方

// class->className;
// style-> 对象的形式
<div style={{color: 'red';}}></div>
// for-> htmlFor
// dangerouslySetInnerHTML危险的设置元素中的内容
<div dangerouslySetInnerHTML={{__html:str}}></div>
复制代码

6. react组件

1. 函数式组件
function App (props) {
  return (
    <div>123</div>
  )
}
2.类组件
class App extends Component {
  render () {
    return (
      <div>123</div>
    )
  }
}
复制代码

7. React.Fragment

<React.Fragment>
    <div className="hello"></div>
    <div style={{color:'red'}}>hello</div>
</React.Fragment>
复制代码

8. prop-types做属性验证

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

let person = {
  name: 'zfpx',
  age: 45
}

class App extends Component {
  static propTypes = {
    name: PropTypes.string.isRequired,
    age: PropTypes.number
  }
  static defaultProps = {
    age: 23
  }
  render () {
    return (
      <div>123</div>
    )
  }
}

ReactDOM.render(<App name="123"/>, document.getElementById('root'))
复制代码

8. setState

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'
class App extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: 1,
      age: 2
    }
  }
  handleClick = () => {
    传构造函数是同步更新
    // this.setState((prev) => ({ age: prev.age + 1 }))
    // this.setState((prev) => ({ age: prev.age + 1 }))
    // this.setState((prev) => ({ age: prev.age + 1 }))
    异步更新
    this.setState({age: this.state.age + 1})
    this.setState({age: this.state.age + 1})
    this.setState({age: this.state.age + 1})
    同步更新
    this.setState({ age: this.state.age + 1 }, () => {
      this.setState({ age: this.state.age + 1 })
    })
  }
  render () {
    return (
      <div>
        <button onClick={this.handleClick}>button</button>
        <button>{this.state.age}</button>
      </div>
    )
  }
}
ReactDOM.render(<App name="123"/>, document.getElementById('root'))
复制代码

9. react生命周期

componentWillMount
componentDidMount
shouldComponentUpdate
componentWillUpdate
componentWillReceiveProps
componentDidUpdate
复制代码

10. refs

class App extends Component {
  constructor(props) {
    super(props)
  }
  handleClick = () => {
    console.log(this.ly.innerHTML)
  }
  render () {
    return (
      <div>
        <div ref={(ly) => this.ly = ly}>hello world</div>
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}
复制代码

11. context.js

// Provider提供数据，consumer消费数据
const { Provider, Consumer } = React.createContext()

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import PropTypes from 'prop-types'

const { Provider, Consumer } = React.createContext()

class User extends Component {
  render() {
    return (
      <Consumer>
        {
          value => {
            let { name } = value
            return (
              <div>
                {name}
              </div>
            )
          }
        }
      </Consumer>
    )
  }
}

class App extends Component {
  render() {
    let v = { name: 123 }
    return (
      <div>
        <Provider value={v}>
          <User />
        </Provider>
      </div>
    )
  }
}
ReactDOM.render(<App name="123" />, document.getElementById('root'))
复制代码

11. DOM DIFF

所谓的virtual dom，也就是虚拟节点。它通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点
dom diff 则是通过JS层面的计算，返回一个patch对象，即补丁对象，在通过特定的操作解析patch对象，完成页面的重新渲染
比较两棵DOM树的差异是Virtual DOM算法最核心的部分,Read Diff算法有三个优化策略
1. DOM节点的跨层级移动操作特别少，可以忽略不计
2. 拥有相同类的两个组件会生成相似的树形结构，拥有不同类的两个组件将会生成不同的树形结构
3. 对于同一层级的一组节点，它们可以通过唯一的key进行区分,开发人员可以使用一个key指示在不同的渲染中那个那些元素可以保持稳定。

复制代码

12. 父子通信

import React, { Component } from 'react'
class Child extends Component {
  myName = () => alert('xiaohesong')
  render() {
    return (
      <div>hello</div>
    )
  }
}
export default class Home extends Component {
  handleClick = () => {
    console.log(this.ly)
    this.ly.myName()
  }
  render () {
    return (
      <div>
        <Child ref={(ly => this.ly = ly)}/>
        <button onClick={this.handleClick}>click</button>
      </div>
    )
  }
}
复制代码