react学习笔记2

一、事件处理

1. 通过onXxx属性指定事件处理函数（注意大小写）：为了更好的兼容性，react重新封装了事件处理函数；为了高效，react中的事件是通过事件委托方式处理的（委托给组件最外层的元素）。
2. react通过evevt.target得到发生事件的DOM元素对象。当发生事件的元素正好是要操作的元素时可以不使用ref。

<div id="div1"></div>
    <script type="text/babel">
        class Demo extends React.Component {
            myRef1=React.createRef()
            render() {
                return (

                    <div>
                        <div>
                            <input ref={this.myRef1} type="text" placeholder='点击按钮提示数据' />
                            <button onClick={this.showData}>按钮</button>
                        </div>
                        <div><input onBlur={this.showData2}  type="text" placeholder='失去焦点提示数据' /></div>

                    </div>
                )

            }

            showData=()=>{
                alert(this.myRef1.current.value)
            }
            showData2=(event)=>{
                alert(event.target.value)
            }
        }
        ReactDOM.render(<Demo/>,document.getElementById('div1'))
    </script>

二、高阶函数与函数柯里化

1. 高阶函数：如果函数符合以下两个规范其中一个，就是高阶函数。若函数接受的参数是一个函数，则该函数为高阶函数；若函数调用的返回值依然是一个函数，则该函数就可以称为高阶函数。常见的高阶函数有Promose、setTimeout、arr.map()等等。
2. 函数的柯里化：通过函数调用继续返回函数的方式，实现多次接受参数最后统一处理的函数编码形式。

三、React生命周期（旧）

1. 组件从创建到死亡会经历一些特定的阶段，react组件中包含的一系列钩子函数(生命周期回调函数)，会在特定的时刻调用，我们在定义组件时，会在特定的生命周期回调函数中做特定的工作。
2. 旧版本生命周期流程：
   a. 初始化阶段：由ReactDOM.render()触发，constructor()–componentWillMount()–render()–componentDidMount()。
   b. 更新阶段：由组件内部this.setState()或父组件render触发，shouldComponentUpdate()–componentWillUpdate()–render()–componentDidUpdate()。
   c. 卸载组件：由ReactDOM.unmountComponentAtNode()触发，componentWillUnmount()。
3. forceUpdate()强制更新,强制更新时不会经过shouldComponentUpdate()判断。componentDidMount()：一般在这个钩子里做一些初始化的事，如开启定时器、发送网络请求、订阅消息等。componentWillUnmount()：一般在这个钩子里做一些收尾的事，如关闭定时器、取消订阅消息等。

四、React生命周期（新）

1. 新版本React里，componentWillMount、componentWillUpdate、componentWillReceiveProps使用需要加上UNSAFE_，因为这些生命周期方法经常被误解和滥用，react官方在新版本中为这个生命周期加上UNSAFE_前缀。
2. 对比旧的生命周期，react废弃或即将废弃componentWillMount、componentWillUpdate、componentWillReceiveProps这三个生命周期方法，提出了getDerivedStateFromProps、getSnapshotBeforeUpdate这两个生命周期方法，这两个生命周期方法都不常见。
3. getDerivedStateFromProps(props,state)会在render方法之前调用，并且在初始挂载及后续更新时都会被调用，它应返回一个对象来更新state，如果返回null则不更新任何内容。此方法适用于state的值在任何时候都取决于props。
4. getSnapshotBeforeUpdate(prevProps,prevState)这个方法介于更新时render和componentDidUpdate之间，在最近一个渲染输出(提交到DOM节点)之前调用。它使得组件在发生更改之前从DOM中捕获一些信息(滚动位置等)，此生命周期的任何返回值(快照值)将作为参数传递给componentDidUpdate()。componentDidUpdate(preProps,preState,snapshotValue)。
   

五、生命周期总结

1. 重要的钩子：
   a. render:初始化渲染或更新渲染调用
   b. componentDidMount:开启监听，发送Ajax请求
   c. componentWillUnmount:做一些收尾工作，如：清理定时器等。
2. 即将废弃的钩子：现在使用会出现警告，下一大版本加上UNSAFE_后才能使用，以后可能会被废弃。
   a. componentWillMount；
   b. componentWillUpdate；
   c. componentWillReceiveProps。