属性以及函数式组件,Hook
五个属性: PureComponent、ref、children、dangerouslySetInnerHTML、key
React的五个属性
PureComponent
个人理解是PureComponent 是类组件的情况下,它是用来继承的
pureComponent 提供了一个具有浅比较,的shouldComponrentUpdate方法其他和component完全一致
是react中创建组件的一种方式,可以减少不必要的更新,易于实施,进而提升性能,每次更新会自动帮你对更新前后的props和state进行一个简单对比, 来决定是否进行更新.只要把继承类从 Component
换成 PureComponent
即可,可以减少不必要的 render
操作的次数,从而提高性能,而且可以少写 shouldComponentUpdate
函数,节省了点代码。
import React, {
PureComponent, Component} from 'react';
class App extends PureComponent {
state = {
name:'张三',
list:["张三01","张三02","张三03"]
}
render(){
let {
name, list} = this.state;
return (
<div>
<h1>{
name}</h1>
<ul>
{
list.map((item,index)=>{
return <li key={
index}>{
item}</li>
})
}
</ul>
<button onClick={
()=>{
this.setState({
name:'yyqx'})
}}>升级</button>
<button onClick={
()=>{
list.push('新人');
this.setState({
list:[...list]})
}}>扩大</button>
</div>
)
}
}
export default App;
以上这个案例当继承PureComponent时,list:[...list]
必须写成这样扩大的这个按钮才会新增数据的; 当继承Component时, list:[...list]
也可以写成list
ref
-
注意: 再组件挂载完成之后及更新之后使用
-
旧版 ref —> 字符串类型绑定
先安装
npm i better-scroll
再引入
import BScroll from "better-scroll";
import React, { PureComponent, Component} from 'react'; import BScroll from "better-scroll"; // new BScroll() let list = [...('.'.repeat(100))]; // console.log(list); class App extends PureComponent { // 组件挂载完成之后 componentDidMount(){ // 通过this.refs绑定ref的名字来获取dom节点 // console.log(this.refs.box); new BScroll(this.refs.box); } render(){ return ( <div style={ { height:'300px', border:'1px solid red', overflow:'hidden' }} ref='box' > <ul style={ { margin:0,padding:0,listStyle:'none'} }> { list.map((item,index)=>{ return <li key={ index}>这是第{ index}个li</li> }) } </ul> </div> ) } } export default App;
这个案例中滚动效果是可以实现的,但是控制台会给一个提示
Warning: A string ref, "box", has been found within a strict mode tree. String refs are a source of potential bugs and should be avoided. We recommend using useRef() or createRef() instead. Learn more about using refs safely here
(字符串ref, “box”,在严格模式树中被发现。字符串引用是潜在错误的来源,应该避免); 可以把index.js中的<React.StrictMode></React.StrictMode>
这个标签删除掉就不会警告了; 此时就要用到下面的这个方法了. -
新版 ref —> createRef()
通过在class中使用createRef()方法创建一些变量,可以将这些变量绑定到标签的ref中,那么该变量的current则指向绑定的标签dom
import React, { PureComponent, Component, createRef} from 'react'; import BScroll from "better-scroll"; // new BScroll() let list = [...('.'.repeat(100))]; // console.log(list); class App extends PureComponent { box = createRef(); componentDidMount(){ // console.log(this); // console.log(this.box.current); new BScroll(this.box.current) } render(