React基础学习个人总结,类组件、函数组件,react-router,react-redux及redux (入门使用小结)
类组件方式
export default class App extends React.Component {
// // 构造函数 可用于继承父组件 可不写
// constructor(props){
// super(props);
// // 与定义state={..}类似
// this.state = {data:[...]};
// }
// 类组件中定义储存当前组件的数据状态等
// 通过this.state获取
// 不能直接修改,要通过this.setState({data:newdata}),将新数据合并到state上,setState是浅合并
state={
data:[...],
}
// 可定义多个函数操作数据,用箭头函数
fn1=()=>{
...
}
// 常用生命周期
挂载
//constructor // 构造函数
static getDerivedStateFromProps(props, state){
} //将 props 关联到 state 中
// render(){}// 虚拟Dom->真实Dom
componentDidMount(){
} // 在组件已经被渲染到 DOM 中后运行
更新
static getDerivedStateFromProps(props, state) //将新props关联到state中
shouldComponentUpdate(newProps,newState){
// 判断是否需要进行组件更新,newProps,newState新的props和state,
// render即根据该两生成虚拟Dom
return true;// 为falses时中止组件个更新
}
getSnapshotBeforeUpdate(props, state) //将生成真实Dom的虚拟Dom的快照
componentDidUpdate(prevProps