使用 react 总结
来源:互联网 发布:artrage mac破解 编辑:程序博客网 时间:2024/05/21 11:01
最近学了一些 react 和es6 的一些知识,并且使用 react 写了一个 TodoList 项目===>预览 && 源码 感觉学的挺多的,并且遇到的坑也不少��,说实话,一开始学 react 看到 jsx 语法有点不适应,说好的结构和行为分离呢��,不过随着通过一个项目的完成,渐渐明白了这么写的好处
好处
- 自定义标签
- 结构清晰
- 代码模块化
- 更加语义化
不过也有缺点
- 浏览器不支持这语法
- 必须通过一大堆工具来转换
一些需要注意的点
1. react声明组件时,组件名称必须以大写字母开头如��:<Todo />
2. 每个标签必须闭合,因为采用的 js+xml 写法,如��: <input />
3. 组件的返回值只能有一个顶层元素,如��:
下面是错误的:
render () { return ( <div>1</div> <div>2</div> )}
必须这样
render () { return ( <div> <div>1</div> <div>2</div> </div> )}
4. return后面要加一个括号,目的是防止 JavaScript 代码在解析时自动在换行处添加分号:
javascript
renderSquare(i) {
return (
<Todo />
);
}
5. render()里面不能写 class,for,而是要写成className
和htmlFor
,因为 class ,for 是 javascript 的关键字,因此不能使用,如:
下面是错误的
<div class=“xxx”>
而是要写 className:
<div className="xxx">
6. 不要直接更新状态,如
this.state.comment = 'Hello';
此代码不会重新渲染组件的,之前就这么写,啥反应也没有��,应该要用setState()
:��
this.setState({comment: 'Hello'});
(注意!!:构造函数(constructor)是唯一能够初始化 this.state 的地方。)
7. 使用style
我们在 html 可以这么写:
<div style="background-color:red;"></div>
但是在 jsx 里面却不能这么写,必须用两个花括号包裹,并且里面不能写-
,要用驼峰形式写,如上面的 background-color
写成backgroundColor
:
<div style={{backgroundColor: 'red'}}></div>
8. 关于 setState
setState方法用于更新当前组件的state状态值,但调用这个方法后,state并不会立即更新,而是在render方法调用后才会更新
react 特点
- 虚拟DOM: React是以数据驱动的,每次数据变化React都会扫描整个虚拟DOM树,自动计算与上次虚拟DOM的差异变化,然后针对需要变化的部分进行实际的浏览器DOM更新。
- 组件化: React可以从功能角度划分,将UI分解成不同组件,各组件都独立封装,整个UI是由一个个小组件构成的一个大组件,每个组件只关系自身的逻辑,彼此独立(比如你有个按钮,很多页面都有这个按钮,那么就可以把这个按钮封装成该组件)。
- 单项数据流:React只有单向数据流动-从父节点传递到子节点
- react-router使用总结
- 使用 react 总结
- 有关使用React的总结
- React Native 路由使用总结
- React Native 路由使用总结
- React Native使用Mobx总结
- React使用技巧总结 <一>
- React 使用技巧总结 <二>
- react-native-scrollable-tab-view 使用总结
- React使用
- react使用
- react使用
- React使用
- React Native 使用问题总结(不断更新中)
- ReactNative导航器react-navigation的使用心得总结
- react native使用react-navigation跳转后多页面数据传递总结
- React Native 学习总结
- React 入门实例教程总结
- stm32 ADC全解(单次,连续DMA传输)
- bzoj 3894: 文理分科
- java调用WebService接口
- 实用C语言管道小程序
- Linux Shell高级技巧(四)
- 使用 react 总结
- 1163 最高的奖励-51Nod
- Java:volatile的作用
- Offer——排序算法
- pair
- 反射
- css-响应式布局
- Linux应用程序开发工具-GDB调试与Make
- python:matplotlib及pandas绘图(2)