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提供了可用的语法糖。原理如下:
![](https://img.haomeiwen.com/i11691158/035c30472f88a3e0.png)
5.jsx对文本的处理:
![](http://upload-images.jianshu.io/upload_images/11691158-f29ff7919ba75e37.png)
6:关于组件继承:
![](http://upload-images.jianshu.io/upload_images/11691158-552055c5d092142b.png)
7.严格模式--React.StrictMode:
![](http://upload-images.jianshu.io/upload_images/11691158-eb64ff832649e962.png)
关于state:
1.不要直接更新状态,要使用setState。
![](http://upload-images.jianshu.io/upload_images/11691158-2f0ddc955a72e8eb.png)
![](http://upload-images.jianshu.io/upload_images/11691158-0538f4f60ef70a4b.png)
2.状态更新可能是异步的
React 可以将多个setState 调用合并成一个调用来提高性能,比如,我在componentDidMount里使用了两个setState,改变了两个值,实际上react只会做一次更新,而且,新的属性只有在下个生命周期内有效,所以,不要指望在生命周期被触发之前,用上新的属性。
![](http://upload-images.jianshu.io/upload_images/11691158-ade1f4e7cd4a764f.png)
3.setState回调函数。
![](http://upload-images.jianshu.io/upload_images/11691158-878b6caf5efaaf97.png)
4.小技巧:以变量的值为key,setState。
![](http://upload-images.jianshu.io/upload_images/11691158-6e2843e885f4d4e9.png)
关于属性:
1.只读,不可修改。
2.单一数据源。
关于生命周期:
1.理解生命周期其实是指生命周期的钩子函数,在生命周期结束后的回调。