本文主要是介绍React学习日记10.31记录，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
目录
一、简单总结生命周期前的内容
二、可能会用到的语句
三、props的生命周期（正式开始）
四、render-props
五、高阶组件(HOC)(函数)
六、React原理分析
前言
跟着黑马程序员React搞的，半途记录从生命周期开始
一、简单总结生命周期前的内容
1.React用组件拼凑
注意：组件名首字母大写
习惯用类组件（必须有继承React.Component，有render渲染，有return返回)
class Father extends React.Component<any, any> {state={name="小明"//这里是状态（储存数据的地方}ONE=()=>{//在Father下定函数console.log("123")}render() {return (<div>//return后有个div，当然使用{}里面内容就是js啦</div>)}
}也有函数组件 （必须有返回值）
2.关于state的注意
只能使用setState来改变state里面内容
如果嫌好多地方都得写this.state，可以考虑用ES6语法const{a,b}=this,state来代替
3.关于props的注意
props是参数，可以实现跨组件传输
class Father extends React.Component<any, any> {state={lastName:'王'}getSonMsg=(msg)=>{//回调函数，是用来SON调用的函数console.log("接受子组件数据",msg)this.setState({lastName:msg})}render() {return (<div><Sonone getway={this.getSonMsg} name={this.state.lastName}/></div>)}
}class Sonone extends React.Component<any, any> {state = {FirstName: '李'}Sonway=()=>{this.props.getway(this.state.FirstName)}render() {return (<div><button onClick={this.Sonway}>{this.state.FirstName}</button><button onClick={()=>this.setState({FirstName:this.props.name})}>改名</button></div>)}
}如果是父传子：
只需要在父的标签处添加一个自己想要的，在子内使用this.props即可
<Sonone getway={this.getSonMsg} name={this.state.lastName}/>
把getway和name传输，
用this.props.name接受name，用this.props.getway()使用getway
如果是子传父
父添加一个回调函数，子得到父的方法后，直接使用即可
二、可能会用到的语句
Map遍历
setTimeout定时器
setInterval连续定时器
constructor，发生在最早
render主要的渲染
componentDidMount，发生在render之后
shouldComponentUpdate（nextProps，nextState），发生在render->construor
React Hook
const[a,seta]=setState(0)
相当于直接使用state里的a，同时seta()代替了setState({a:XX})
三、props的生命周期（正式开始）
意义：用于理解组件的运行方式，完成更复杂的组件功能，分析组件错误原因
关键：钩子函数，只有类组件才有生命周期
生命周期的三个阶段
挂载阶段（页面加载时）：
constructor()=>render()=>componentDidMount不考虑自上而下
construtor(props){super(props)console.log("construtor")
}componentDidMount(){console.log("componentDidMount")
}
render(){console.log("render")return 0;
}
注意：
不要在render内调用setState（），因为每次渲染render就会触发，setState即为触发渲染
更新阶段（页面更新时）：
三种导致更新的原因New props，setState，forceUpdate
注意：
如果出现递归，可以添加判断；如componentDidUpdate内部放入setState
结束阶段（终结组件）：
ComponentWillUnmount()组件卸载时触发，可以清理定时器，监听
总结：
先constructor >>> render >>> componentDidMount
后New props,setState,forceUpdate它们的每次调用都会更新前面的钩子函数
当组件消失的时候，触发ComponentWillUnmount
四、render-props
相当于父提供多个个方法给子，子使用这个方法
<Mouse render={(mouse)=><p>{mouse.x},{mouse.y}<p>}/>使用这个拿到值class Mouse extends React.Component{state={x:0,y:0
}handleMouseMove=e=>{this.setState({x:e.clientX,y:e.clientY
})
}componentDidMout(){window.addEventListener('mousemove',this.handleMouseMove)
}render(){return this.props.render(this.state)//调用render
}
}
图为案例获取鼠标位置的公用组件
建议用children代替render属性（大部分人都这样
相较于HOC，render-props偏向于教套用的组件方式，然后套用的组件根据方式干活
HOC偏向于提供个数值
五、高阶组件(HOC)(函数)
目的：实现状态逻辑复用
使用步骤:
先创建一个高阶组件，返回出一个小组件
后使用一个正常的组件，来回一次，便可以获取数值
多采用函数型组件，如果无其他需求，只提供UI样式
理解:
倒着来，创建一个加工的组件，这个加工组件是从高阶组件return小组件，
小组件的return标签{...this.state}构成的，同时再添加一个{...this.props}接受标签数据
注意：
创建函数约定用with开头，参数为函数参数以大写字母
import React from "react";
import img from"../../../../Download/1.png"
//高阶组件相当于手机壳，通过包装组件，增强组件功能
//接受要包装的组件（参数）
//组件内部创建一个类组件，在这个类组件中提供复用的状态逻辑代码function withMouse(WrappedComponent){class Mouse extends React.Component<any, any>{state={x:0,y:0}mousemovemove=e=>{this.setState({x:e.clientX,y:e.clientY})}componentDidMount() {window.addEventListener('mousemove',this.mousemovemove)}render() {return <WrappedComponent{...this.state}/>;}}return Mouse
}
//获取位置
const Position=props=>(<p>鼠标当前位置:{props.x}{props.y}</p>
)
const MousePosition = withMouse(Position)
//带上图片
const imgMouse=props=>(<img src={img} alt="" style={{position:"absolute",top: props.y,left:props.x,height:50}}/>
)
const MouseimgMouse = withMouse(imgMouse)export default MouseimgMouse注意：上图采用最后渲染交给了index，案例为获取鼠标位置，并显示和贴图
六、React原理分析
1.setState说明
是异步更新的！
分析：
this.setState({cout:this.state.cout+1})
console.log(this.state.cout)
如果在同一个函数方法里使用上述，日志显示仍为原有，因为setState是异步更新.
setState () 将对组件 state 的更改排入队列，并通知 React 需要使用更新后的 state 重新渲染此组件及其子组件
解决同一函数，setState异步更新影响 ：
用的实时更新的state
第二个参数！
this.setState(updatae状态更新,callback后执行的)
2.组件性能优化
1.减轻state
只储存cout/列表数据/loading
不用做渲染的数据不要放在state，可以直接放在this
2.避免不必要的重新渲染
可以用钩子函数shouldComponentUpdate(){}，返回false，阻止渲染
用this.state拿到之前的state，用nextState拿到最新状态
该钩子函数发生在shouldComponentUpdate->render，就是重新渲染前
3.纯组件
由于机制判断原因，会把相同地址的对象认为相同，所以不渲染
（就是直接改数字的原因，没用的原因
未完续
这篇关于React学习日记10.31记录的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
