React组件会在什么时候render？
- state使用setState正确改变；
- props改变，并且符合shouldComponentUpdate为true时候渲染；
- 父组件渲染，引起子组件渲染；（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>
</>
}
}
- 手动调用ReactDOM.render/forceUpdate
生命周期函数作用？
可以用在在组件运行的不同时刻执行自定义操作的方法；
生命周期中的部分函数，执行顺序是固定的：
挂载(mounting)
更新（updating）
static getDerivedStateFromProps()shouldComponentUpdate()render()getSnapshotBeforeUpdate()componentDidUpdate()
Unmounting(卸载)
error handling(错误处理)
组件什么时候被销毁？
- 手动调用
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本质上是函数，没有生命周期和持久化，不可以控制渲染；
函数组件可以有持久化数据，自主渲染，包含有组件状态；
