React 生命周期 表单元素处理 ref属性 性能优化 HOC高阶组件

表单元素处理 ref属性 性能优化 HOC高阶组件"/>

React 生命周期 表单元素处理 ref属性 性能优化 HOC高阶组件

生命周期

生命周期:指对象从创建,到销毁的过程,就是一个生命周期 钩子函数:在某时某刻自动被调用的函数就是钩子函数

• 挂载期

  //构造函数. 作用: 在初始化时做state 数据的赋值工作
  constructor(props){super(props)console.log('==constructor==');// console.log(this.props);this.state = {name:'贾玲'}
  }
  //从props中获取stats数据
  static getDerivedStateFromProps(props,state){console.log('==getDerivedStateFromProps==');// 必须return 一个对象或者nullconsole.log(props);console.log(state);return state
  }
  //作用:做jsx模板的解析,
  render() {console.log('==render==');//报错// console.log(document.querySelector('h1').innerHTML);
  ​const {age} = this.propsreturn (<div className="alert alert-info"><h1>生命周期</h1><div>age:{age}</div></div>)
  }//作用: 定时器 延时器 轮播图 等等各种请求
  componentDidMount(){console.log('==componentDidMount==');console.log(document.querySelector('h1').innerHTML);=
  }

• 更新期:当props或着state的数据发生改变的时候,处于更新期

  // getDerivedStateFromProps
  //应该更新组件吗?
  /*** 必须return一个结果 如果是true,表示更新数据  如果是false表示不更数据* 应用:在实际开发中,有一些特殊的业务逻辑在更新完数据之后不希望用户看到,这是该钩子函数就可以实现
  */
  shouldComponentUpdate(){console.log('==shouldComponentUpdate==');return true
  }
  // render...
  // 组件更新完成
  componentDidUpdate(prevProps,prevState){console.log('==componentDidUpdate==');//获取的是更新之前的propsconsole.log(prevProps);// 获取更新之前的stateconsole.log(prevState);
  }

  + 销毁期
​
  ``` js
   //销毁期
   componentWillUnmount(){
       console.log('==componentWillUnmount==');
   }

表单元素处理

在react中没有提供表单的数据双向绑定,在html中input textarea select等等,自己本身有各自的状态,可进行随时修改. 受控组件: 状态受react组件的控制 非受控组件:状态不收react组件的控制

  <!-- 输入框 --><input type="text" value={this.state.name} onChange={(e)=>this.setState({name:e.target.value})}  /><!-- 文本域 --><textarea value={this.state.description} onChange={(e)=>this.setState({description:e.target.value})}  cols="30" rows="10"></textarea><!-- 单选 --><input type="radio"  value="1" checked={this.state.sex==='1'} onChange={(e)=>this.setState({sex:e.target.value})} />男<input type="radio"  value="2" checked={this.state.sex==='2'} onChange={(e)=>this.setState({sex:e.target.value})} />女<!-- 下拉框 --><select value={this.state.val4} onChange={this.changeVal4}><option value="school">学校</option><option value="home">家</option><option value="company">公司</option></select>

多选框：

  <label>杭州</label><input type="checkbox" name="city" value="hangzhou" checked={this.state.val3.includes("hangzhou")} onChange={this.changeVal3} /><label>苏州</label><input type="checkbox" name="city" value="suzhou" checked={this.state.val3.includes("suzhou")} onChange={this.changeVal3} /><label>泉州</label><input type="checkbox" name="city" value="quanzhou" checked={this.state.val3.includes("quanzhou")} onChange={this.changeVal3} /><!-- js代码如下： -->changeVal3(e) {if (this.state.val3.includes(e.target.value)) {let index = this.state.val3.indexOf(e.target.value)// 数组中包含此项，又选择了这一项，就表示要删除this.state.val3.splice(index, 1)} else {this.state.val3.push(e.target.value)}let arr = this.state.val3;this.setState({val3: arr})}

非受控组件

    render() {return (<div className="alert alert-info"><h1>非受控组件</h1><div><input type="file" ref={this.input} /></div><div><button onClick={()=>this.submit()}>提交</button></div></div>)}submit(){console.log(this.input.current.files);}

ref属性：查找节点，DOM元素或者组件,类似vue的ref属性，用来直接操作dom，一般不用

  constructor(){super()this.input = React.createRef()}render() {return (<div className="alert alert-info"><h1>ref属性</h1><Child ref={this.input} /></div>)}componentDidMount(){// console.log(this.input.current);this.input.current.innerHTML='XXX'}

React的性能优化

1.减少操作dom的次数 2.减少涉及到dom的数量

• React.Fragment

import React, { Component } from 'react'export default class Box1 extends Component {render() {return (// 系统组件//无需向组件添加额外的DOM节点// <React.Fragment>//     <li>html</li>//     <li>css</li>//     <li>js</li>// </React.Fragment>// 简写形式<><li>html</li><li>css</li><li>js</li></>)}
}

• React.memo(无用的渲染)

import React, { Component } from 'react'// 没有React.memo
//  const Index = (props)=>{
//      console.log('数据更新了');
//         return (
//             <div>
//                 <h2>{props.msg}</h2>
//             </div>
//         )
// }// 有React.memo
//作用:方式无用的渲染
const Index = React.memo((props)=>{console.log('数据更新了');return (<div><h2>{props.msg}</h2></div>)
})export default class Box2 extends Component {constructor(){super()this.state = {msg:'哈哈哈'}}render() {const {msg} = this.statereturn (<div><h1>React.memo</h1></div>)}
}

• 纯组件

  export default class Child2Child extends PureComponent {code ...// 使用PureComponent之后，只有父组件传进来的值变化时，才会更新}

• 错误边界,避免某个组件报错后，整个项目不能运行

import React, { Component } from 'react'
​
export default class ErrorBoundary extends Component {constructor() {super();this.state = {// 初始化没有错误hasError: false,error: null}}// 当错误发生而且被捕获时执行componentDidCatch(error) {this.setState({hasError: true,error: error})}render() {const {hasError, error} = this.state;return (<>{/* this.props.children是这个组件的子组件 */}{hasError?<mark>代码报错了...</mark>:this.props.children}</>)}
}
​
// 用这个组件将可能会报错的组件包裹起来
<ErrorBoundary><Error></Error>
</ErrorBoundary>

HOC高阶组件:HOC高级组件不是组件，是函数，这个函数的参数和返回值都是组件

  const Fn = (C) => {// 返回值也是一个组件return class extends Component {render() {return (<>{/* p是高阶组件加入的功能 */}<p>我是一个高级组件...</p>{/* C是组件原有的功能 */}<C {...this.props}></C></>)}}
}
​
class Com1 extends Component {render() {return (<div>我是Com1</div>)}
}
class Com2 extends Component {render() {return (<div>我是Com2</div>)}
}
​
// 通过高阶组件强化已有的组件.Com1本身是组件，通过FN强化后，会返回一个新的组件，就是FnCom1
const FnCom1 = Fn(Com1);
const FnCom2 = Fn(Com2);
​
export default class Base extends Component {render() {return (<div><p>以下是高阶组件强化后的新组件：</p><FnCom1></FnCom1><FnCom2></FnCom2></div>)}
}