react初探-容易忽略这些内容
2018-04-21 本文已影响7人
xhbisme
关于react:
1.react是一个ui框架,重要的大部分有三个:状态(state),属性(props),生命周期。
2.react中所有长的像html的标签,都不是真正的html标签。它们是虚拟dom,是一个element对象,它们将会被react拿去处理成虚拟dom树,然后将虚拟dom树渲染成真是dom,具体怎么渲染的,我们下回详谈。
3.阻止页面渲染,我们可以通过条件判断来 return null。
4.JSX为React.createElement提供了可用的语法糖。原理如下:

5.jsx对文本的处理:

6:关于组件继承:

7.严格模式--React.StrictMode:

关于state:
1.不要直接更新状态,要使用setState。


2.状态更新可能是异步的
React 可以将多个setState 调用合并成一个调用来提高性能,比如,我在componentDidMount里使用了两个setState,改变了两个值,实际上react只会做一次更新,而且,新的属性只有在下个生命周期内有效,所以,不要指望在生命周期被触发之前,用上新的属性。

3.setState回调函数。

4.小技巧:以变量的值为key,setState。

关于属性:
1.只读,不可修改。
2.单一数据源。
关于生命周期:
1.理解生命周期其实是指生命周期的钩子函数,在生命周期结束后的回调。