react问题小结（持续更新中）

React组件会在什么时候render？

1. state使用setState正确改变；
2. props改变，并且符合shouldComponentUpdate为true时候渲染；
3. 父组件渲染，引起子组件渲染；（class组件）
   在不添加任何控制的情况下，即使父组件中props的更新与子组件无关，子组件仍然会渲染；

const RenderFatherComp: React.FC<IProps> = () => {
  const [father, setFather] = useState('父亲');
  return <>
    <button onClick={() => setFather((f) => f + 'father')}>
      click to change father
    </button>
    <div>this is {father}</div>
    <RenderComp ></RenderComp>
  </>
}

class RenderComp extends React.Component<IProps, IState> {
  constructor(props: any) {
    super(props);
    this.state = {
      count: 0,
    }
  }
  onClick = () => {

  }
  render() {
    console.log('儿子render')
    return <>
      <div>
        <button onClick={this.onClick}>儿子</button>
        <h2>上面才是{this.props.father}</h2>
      </div>
    </>
  }
}

4. 手动调用ReactDOM.render/forceUpdate

生命周期函数作用？

可以用在在组件运行的不同时刻执行自定义操作的方法；
生命周期中的部分函数，执行顺序是固定的：

挂载(mounting)

• constructor()
• static getDerivedStateFromProps()
• render()
• componentDidMount()

更新（updating）

• static getDerivedStateFromProps()
• shouldComponentUpdate()
• render()
• getSnapshotBeforeUpdate()
• componentDidUpdate()

Unmounting(卸载)

• componentWillUnmount()

error handling(错误处理)

• static getDerivedStateFromError()
• componentDidCatch()

组件什么时候被销毁？

• 手动调用ReactDOM.unmountComponentAtNode(container)
  官方文档：

从 DOM 中卸载组件，会将其事件处理器（event handlers）和 state 一并清除。如果指定容器上没有对应已挂载的组件，这个函数什么也不会做。如果组件被移除将会返回 true，如果没有组件可被移除将会返回 false；

• 父组件销毁子组件随之销毁；

• 在父组件中写判断语句，如果符合条件返回子组件，不符合返回'' || null，数据驱动控制组件销毁；

• 在class组件执行componentWillUnmount生命周期时，卸载componentDidMount等前序生命周期中执行的副作用，例如：
  事件监听，异步函数，多余的变量，没有恢复的状态；

受控组件和非受控组件？

受控组件：所有的值受外部控制，需要用状态来手动维护，除了value为null || undefined 的情况，都是受value控制，在响应输入后立马变回原值，对于其他框架/库迁移后的代码不友好；

如果我们希望输入框有默认值，并且输入时可以改变这个值，那么可以使用 defaultValue
属性：

const Controlled = () => (
 <form>
 <input type="text" defaultValue="Hello React" />
 <button>Submit</button>
 </form>
)

非受控组件：不在外部维护组件状态，所有的值都来源于DOM(keeps the source of truth in the DOM)，可以对外暴露方法，在外部可以拿到改变后的状态，更符合其他框架/库迁移时的条件；

什么是不可变数据？

通过返回一个新的对象来更新状态，包括但不限于Object.assign({}, oldData), {...oldData}
因为组件中shouldComponentUpdate是浅比较，如果直接改变对象，不会触发组件的更新；

React、React DOM、React Component 和React Elements的关系？

什么是JSX？

JSX是createElement的语法糖，createElement 是纯的javascript数据；
官方示例：

<MyButton color="blue" shadowSize={2}>
  Click Me
</MyButton>

将会编译为

React.createElement({
  type: '',
  {  
    color: 'blue',
    shadowSize: '2'
  },
  'Click me'
})

RenderProps和函数组件有什么区别？

Render Prop是指组件接受一个函数作为属性，在调用该函数时渲染传递的组件；

好处：

同级的组件可以共享state；
可以通过render属性传递一个封装组件和复合数据，增强内聚；

区别

renderProps本质上是函数，没有生命周期和持久化，不可以控制渲染；
函数组件可以有持久化数据，自主渲染，包含有组件状态；