React 简介
React 基础
JSX的本质
JSX并不是标准的JS语法，它是JS的语法扩展，浏览器本身不能识别，需要通过解析工具做解析之后才能在浏览器中运行。
这里主要依靠BABEL解析工具来解析，下面简单的介绍一下这个解析工具(http://babeljs.io)：
JSX中使用JS表达式
在JSX中可以通过大括号语法 {} 识别 JavaScript中的表达式，比如常见的变量、函数调用、方法调用等等.
- 使用引号传递字符串
{'this is message'}
- 使用Javascript变量
{count} - 函数调用和方法调用
function get() {
return 'Hello world!'
}
{get()}
- 使用javaScript对象
<div style={{color:'red'}}>
this is div.
</div>
JSX中实现列表渲染
<ul>
<li>湖北省</li>
<li>湖南省</li>
<li>河北省</li>
</ul>
语法：在JSX中可以使用原生JS中的map方法遍历渲染列表
JSX实现条件渲染
语法：在React中，可以通过逻辑运算符&&、三元表达式(?:)实现基础的条件渲染
// 定义文章类型
const articleType = 1
function getArticle() {
if (articleType === 0) {
return <div>我是无图文章</div>
} else if(articleType == 1) {
return <div>我是单图模式</div>
} else {
return <div>我是三图模式</div>
}
}
React中的事件绑定
React基础事件绑定
语法：on + 事件名称 = {事件处理程序}，整体上遵循驼峰命名法
const handleClick = () => {
console.log('button被点击了')
}
return (
<div className='App'>
<button onClick={handleClick}>click me</button>
</div>
)
使用事件对象参数
语法：在事件回调函数中设置形参e
传递自定义参数
语法：事件绑定的位置改造成箭头函数的写法，在执行clickHandler实际处理业务函数的时候传递实参
注意：不能直接写函数调用，这里事件绑定需要一个函数引用
同时传递时间对象和自定义参数
语法：在事件绑定的位置传递事件实参e和自定义参数，clickHandler中声明形参，注意对应顺序
React中的组件
组件是什么
概念:一个组件就是用户界面的一部分，它可以有自己的逻辑和外观，组件之间可以互相嵌套，也可以复用多次
组件化开发可以让开发者像搭积木一样构建一个完整的庞大的应用