react导入依赖
import React from 'react';
import ReactDOM,{render} from 'react-dom'
- react由两部分组成： react 包和 react-dom ,语法都是ES6
- import语法要放在页面最顶部
- ReactDOM中有一个常用的方法，render()
JSX
什么是JSX
类xml语法的ECMAScript扩展
- javascript+xml(html也是xml的一种)
- JSX中html部分和原生html基本一样，但是不完全一样
- JSX是语法糖，最后由babel编译成 React.createElement 这样可执行的JS代码，createElement 生成的对象被称为
React elements
React.createElement(
"h1",
{className:'red'},
"hello ",
React.createElement(
"span",
{id:"world"},
"world"
)
)
JSX语法
- 可以将JS表达式用花括号包起来，在JSX中使用
- JSX代码换行时，建议使用圆括号包起来，避免自动插入分号时产生错误
- JSX本身也是表达式，可以再if或for循环中使用、赋值给变量、作为函数的参数或者返回值。
- JSX中两个相邻的JSX元素外层需要包裹一层元素
- null在JSX中也是合法的元素，表示不存在
JSX中插入属性
- 可以使用引号来声明字符串字面量类型的属性；或者使用花括号插入JS表达式类型的属性，但是不能同时使用引号和花括号
- 普通属性和html一样
- 特殊属性：class 和 for
- style必须是一个对象类型
- 危险的插入，innerHTML xss攻击
let str = '<h1>123</h1>';
let styl = {backgroundColor:'red'};
render(<div>
<li className="aa"></li>
<li htmlFor="aa" style={styl}></li>
<li dangerouslySetInnerHTML={{__html:str}}></li>
</div>,window.root);
React 组件
- 封装组件的好处复用、组合、好维护
- 组件声明的两种方式：类和函数，类声明的方式有this、状态和生命周期
- 组件名首字母大写
- react组件可以和JSX混用
function Build(props) { // "函数"(组件)的参数是属性
return <p>{props.name} {props.age}</p>
}
组件的state
- 在构造函数中初始化state
- state的变化可以更新视图，更改状态只用一种方式
this.setState()
- render方法会被优化，只会重新渲染改变的地方
组件的props
如果想在构造函数中获取属性，需要通过参数的方式
不能在组件中修改属性
校验属性
import PropTypes from 'prop-types';
static propTypes = { // 校验属性的类型和是否必填
age:PropTypes.number.isRequired, // 支持的类型可以参考prop-types的readme文件
};
默认属性
static defaultProps = { // 先默认调用defaultProps
name:'hello',
age:1
};
其他属性
this.props.children可以获取组件中的内容
- 默认不传递，获取到时undefined
- 传入一个时是对象类型，传入多个是数组
- 可以使用React.Children.map去遍历
组件的生命周期
componentWillMount组件将要挂载：采用同步的方式获取本地数据（渲染之前获取数据，只渲染一次）
componentDidMount 组件渲染完成
shouldComponentUpdate(nextProps,nextState)
componentWillUnmount组件将要卸载，一般在这清除定时器和绑定事件。
受控组件与非受控组件
- 受控组件: 每当表单的状态发生改变时，都会写入state中
- 非受控组件：不受组件自身的state或props控制，通过为其添加ref来访问渲染后的底层DOM元素
组件的通信
父传子:
通过传递props
子传父：
通过回调函数:父通过属性传递子一个函数，儿子调用这个函数将值传递给父亲，父亲更新值，刷新视图。
