React小记（一）

1. Props传递时导致Pure组件重新渲染

若直接在render里面去声明参数来传递给子组件，那么当父组件触发重新渲染的时可能会导致Pure的子组件也被重新渲染（String, Number, Boolean, null, undefined除外）。

const listArray = []
export default class App extends React.Component {
  state = {
    isLogin: false
  }

  userInfo = {name: 'Evan'}
  
  changeState = () => this.setState({
    isLogin: !this.state.isLogin
  })
  
  // class fields
  showLog = () => console.log('show Log')

  render() {
    return (
      

        
更新状态
        {/* 会引发PureComponent重新渲染 */}
         this.showLog()}
          userInfo={{name: 'Evan'}}
          list={[]}
        />
        {/* 推荐：改成引用的方式 */}
        
      
    )
  }
}

建议改成引用的方式去传递

2.key为索引的危害

当使用数组下标为索引时，可能会使元素显示错误当信息，因此应该避免使用index作为key。

export default class App extends React.Component {
  state = {
    list: [{id: 1},{id: 2}]
  }

  addItem = () => this.setState({list: [{id: this.state.list.length + 1}, ...this.state.list]})

  render() {
    return (
      

        add items
        {/* 使用index作为key */}
        {
          this.state.list.map((v, i) => 

            第{i + 1}个：
          
)
        }
        

        {/* 使用id作为key */}
        {
          this.state.list.map((v, i) => 

            第{i + 1}个：
          
)
        }
      
    )
  }
}

3. Fragments

Fragments可以让我们减少一些不必要的DOM节点的添加，它还有一个短语法可以达到相同的效果，短语法不支持key这个参数。

render() {
  return (
    // 正常写法，可以支持key
    
      
      
       {/* 短语法 */}
      <>
        
        
      
    
  );
}

4. 组件懒加载

在React16版本中新增了一个组件懒加载的方式，通过React.lazy动态引入组件然后再用Suspense来包裹即可。
Suspense用来暂停组件渲染直到React.lazy引入完成才开始渲染。

const Child = React.lazy(() => import('./Child'));

class App extends React.Component {
  childRefs = React.createRef();
  logRef = () => console.log(this.childRefs)
  render() {
    return (
      
        Click Me
        Loading...

}> ) } } export default App;

5.关于refs

除去原本的回调函数外，React在16版本引入了React.createRef与React.forwardRef两个方法用来处理ref，它们会返回一个对象，而所获得的实例都会被存储到该对象的current里。

• React.createRef
  获取 子元素/组件 的ref，所绑定的实例会被存储到该ref的current里

export default class App extends React.Component {
  // 用来储存ref
  childRefs = React.createRef();
  logRef = () => console.log(this.childRefs)
  render() {
    return (
      
        Click Me
        {/* 把子组件实例关联到 childRefs 上*/}
        
      
    )
  }
}

• forwardRef
  用来转发ref，由于函数组件没有实例，所以没有ref，如需在父组件里获取其子组件某个元素的ref，那么可以使用该方法。

class App extends React.Component {
  // 用来储存ref
  childRefs = React.createRef();
  logRef = () => console.log(this.childRefs)
  render() {
    return (
      
        Click Me
        
      
    )
  }
}
const FnChild = React.forwardRef((props, ref) => 
我是函数组件
)