ReactDOM.render((<div></div>),document.getElementById('root')),这里是渲染一个div组件到root这个容器上面。
(<div></div>)这里面使用圆括号为了换行方便
组件编写:
1.组件名字首字母大写,这样的目的是渲染的时候证明是组件而不是html的标签
2.所有的组件集成Component,这样的好处是可以实现组件参数和状态初始化还有生命周期
3.组件必须有构造方法,注意传递的参数为...args,有的人会说是props,但是...args这样的好处是方便
某个组件应用其他组件的时候参数传递用起来方便
4.组件必须有render方法
5.jsx必须有个容器包裹
模板输出:
1.{}代表输出,这里注意属性和方法需要this.xx输出,对于“”输出的是字符串。
2.return在js中换行会出问题,建议return(),括号里面的内容则可以进行换行
组件传参:
1.注意传参的时候是“”还是{},接收的时候使用prop进行接收
2.对于行间样式style必须是json,<div style={{color:red} }/>,这里有的人会疑问这里为什么是两个{},
这里简单说下,{color:red}可以写成一个变量,let textColor = {color:red},<div style={textColor }/>.
对于key的问题:跟踪虚拟dom的变化,比如{12,12,6,8}=》{12,6,9}根本不知道数据
怎么变化的,所以增加key进行数据跟踪,对于for循环不允许使用index,因为index可能因为add或者delete导致
数据变化了然后会导致故障
如果成组的加入的时候,
1.1. key不能重复
1.2. 可以不能修改
1.3. 必须有key
普通组件的引入:
数组类型:
数据遍历: