react基础概念

1. React 介绍

   什么是React?

   React 是一个用于构建用户界面的Javascript库。

   React 使用组件的方式构建界面。

   在 React 中一切都是Javascript。用户的界面使用的是javascript，用户使用的样式是Javascript，用户的交互逻辑使用的样式javascript。

2. JSX语法

   什么是JSX?

   JSX是一种javascript语法扩展，是一种语法糖、表达式，用来表达用户界面的结构，可以赋值给变量也可以作为函数返回值。如：

const app = <h1>第一个APP</h1>

​ 2.1 JSX属性

​ jsx属性为字符串的时候，使用引号，如果是javascript表达式属性外面用大括号

// 属性为字符串
const app = <h1 ohter='other'>第一个app</h1>

// 表达式
const a = <div className={data.avatar}>用户名称</div>

// JSX必须闭合
const app = <App />

// 数组自动展开
const arr = [<p>哈哈</p>, <p>哦哦</p>, <p>嘿嘿</p>]
const ele = (
    <div>
        {arr}
    </div>
)
/ * 
    解析后：
    <div>
        <p>哈哈</p><p>哦哦</p><p>嘿嘿</p>  
    </div>
*/

// 三元表达式
<div>{
    boolean ? <div>a</div> : null
}</div>

// 循环
const person = [{ name: 'ph' }]
<ul>
    {
        person.map(item => <li>{item.name}</li>)
    }
</ul>

// 事件
    <button onClick={this.handler}></button>

ref属性 获取真实DOM

方法一: createRef

class Input extends Component {
    constructor() {
        super()
        this.inputRef = createRef()
    }
    render () {
        retrun (
            <div>
                <input type='text' ref={this.inputRef} />
                <button onClick={() => { console.log(this.inputRef.current) }}></button>
            </div>
        )
    }
}

​ 方法二：

class Input extends Component {
    constructor() {
        super()
    }
    render () {
        retrun (
            <div>
                <input type='text' ref={input => this.input} />
                <button onClick={() => { console.log(this.inputRef) }}></button>
            </div>
        )
    }
}

3. 生命周期

生命周期分三个阶段： 挂载阶段、更新阶段、卸载阶段

挂载阶段： constructor --> getDerivedStateFromProps -> render -> componentDidMount

更新阶段： getDerivedStateFromProps --> shouldComponentUpdate --> render --> getSnapshotBeforeUpdate --> componetDidUpdate

卸载阶段： componentWillUnmount --> componentDidUnmount

在确定 getDerivedStateFromProps 中可以根据父组件传过来的state来确定是否更新子组件的state, 返回值为子组件最新的state

getDerivedStateFromProps(parentState, childState) {
    retrun {}
}

在组件完成更新之前需要做某种逻辑或者计算，就需要用到快照

componentDidUpdate(prevProps, prevState, snapshot) {}

getSnapshotBeforeUpdate 方法会在组件完成更新之前执行，用于执行某种逻辑或计算，返回值可以在 componentDidUpdate 方法中的第三个参数中获取，就是说在组件更新之后可以拿到这个值再去做其他事情。

getSnapshotBeforeUpdate(prevProps, prevState) {
  return 'snapshot'
}