react基础|青训营笔记

1.react的语法特点

1. ReactDOM.render()： ReactDOM.render()是react的最基本的方法，是用于将模板转为HTML语言，并插入到指定的DOM节点

2. JSX语法：JSX语法也是react的一个特点，它允许HTML与js混写，但是js一定要用{}包住，并且用return返回HTML;要注意在虚拟的DOM中是不允许要if判读的，可以用三目运算 <Checkbox.Group onChange={this.onChange} value={checkedList}> { plainOptions.map(function (value,index) {

              return (
                <Checkbox key={index} value={plainOptions[index].value}>{plainOptions[index].name}</Checkbox>
              )
   
            })
          }
   

</Checkbox.Group> 2.react的样式问题： react的行内样式和我们平时写HTML有所不同,react的行内样式要用{{}} 包住才会解析成HTML格式的样式，然后向写对象一样写样式 // html的行内样式是这样式儿的

// react的行内样式是这样式儿的 <span style={{ fonsSize:30, display:none}}>

3.react的class问题 react的在写class的时候也有所不同；react将class改成了className，因为class是保留字符，会出现报错，所以在react中使用的是className;如果想写多个class的名字；可以利用classnames 插件

4.react中的注释问题 react中的注释问题也非常有特点

{/* 这里写的是react虚拟DOM中的注释哦 */} 其实react虚拟DOM中的结构，会用{}包住，这样可以解析成对应的Dom结构

说起react，前端程序猿（媛）肯定都不会陌生，三大龙头之一，与vue，angular齐驱并驾，用之者甚多，虽然有公司已经声明说不在使用react，但并不影响我们前端小白。工作还是要工作的，公司用什么咱就用什么，再者，即便是出现什么问题，对于我们会一个框架也不是什么有害的事情。

每个组件都有一个私有状态state 下面的内容也仅适用于class-based组件。

State 类域在React class组件都是特有的。React监视这个每一个组件的state的改变。为了高效的实现这个机制，我们需要通过另外一个顶级的React API来修改state，那就是this.setState: