react 基础理解

1. react 和 react-dom 库

• react 设计之初就是使用 JSX 来描述 UI，所以解耦了和 DOM 的操作
  • react 只负责逻辑层。
  • react-dom 负责渲染层，去渲染实际的 DOM。

2. JSX 的实质

• JSX 语法即 JS 和 HTML 的混合体，实际的核心逻辑就是用 JS 实现的
• JSX 的实质就是 React.createElement 的调用
• DOM 结构的嵌套就是 React.createElement 的调用

// react 中的写法
class HelloPage extends React.Component {
    render(){
        return (
            <div>
                Hello { this.props.name }
            </div>
        )
    }
}

ReactDom.render(
    <HelloPage name="type" />,
    document.getElementById('root')
)

// jsx 的实际写法
class HelloPage extends React.Component {
    render(){
        return React.createElement(
            "div",
            null,
            "hello",
            this.props.name
        )
    }
}

3. React 中的 state

• state 写在 constructor 里面和写在外面是一样的，state属性都是挂载到组件实例上

  class HelloPage extends React.Component {
      constructor(props){
          super(props);
          this.state = {
              count: 0
          }
      }
  
      // 等价于
  
      state = {
          count: 0
      }
  }
  

• setState 是异步的，底层设计 同一个生命周期 会批量操作更新 state;
• setState 的第二个参数是可选参数，传入一个回调函数可以获取到最新的 state;
• 当修改的 state 依赖上一次修改的 state 的值时，可以用下面的方法实现

  ① this.setState((prevState, prevProps)=>{
      return {
          count: prevState.count + 1
      }
  })
  ② this.setState({ count: 1 }, ()=>{
      console.log('count', this.state.count)
  })
  

4. props 属性传递

• 父组件向子组件传递属性利用 props 接收
• 示例
  • class 组件

  class HelloPage extends React.Component {
      render(){
          return (
              <Provide title="子组件" />
          )
      }
  }
  
  class Provide extends React.Component {
      render(){
          return (
              <div>{ this.props.title }</div>
          )
      }
  }
  

  • function 组件

  fucntion Provide({title}){
      return <div>{ title }</div>
  }
  

5. React 的生命周期（新版react生命周期已更新）

• componentWillMount 组件将要挂载

• componentDidMount 组件已经挂载

• componentWillReceiveProps 父组件传递的数据有变化，做出相应的响应

• shouldComponentUpdate 组件是否需要更新，返回布尔值

• componentWillUpdate 组件将要更新

• componentDidUpdate 组件已经更新

• componentWillUnmount 组件即将销毁

6. UI组件和容器组件的区别

• UI组件负责根据props展示页面信息
• 容器组件负责组件的获取和处理
• 分离UI组件和容器组件的区别
  • 分离工作组件和展示组件
  • 提高组件的重用性
  • 提高组件的可用性和代码阅读
  • 便于测试与后续的维护

7. 函数式组件

• 函数式组件是一种无状态组件，是为了创建纯展示组件，这种组件只负责根据传入的 props 来展示，不涉及到 state 状态的操作
• 组件不会被实例化，整体渲染性能得到提升
• 组件不能访问 this 对象
• 组件无法访问生命周期的方法
• 无状态组件只能访问输入的 props ， 同样的 props 会得到同样的渲染结果，不会有副作用
• 官方文档说：在大部分的 react 代码中，大部分组件都被写成无状态组件，通过简单组合可以构建成其它组件等

import React from 'react';
export default function xxx(){
    return (
        <div>xxx</div>
    )
}

8. class 组件的写法

• React.Component 是以 ES6 的形式来创建 react 的组件的，是 React 目前极为推荐的创建状态组件的方式
  • 在里面我们可以写入我们的状态、生命周期、构造函数等
  • 具体使用如下：

    import React, { Component } from 'react';
    
    export default class App extends Component {
        render(){
            return (
                <div>xxx</div>
            )
        }
    }