2018-03-13 React 学习总结（一）

react导入依赖

import React from 'react';
import ReactDOM,{render} from 'react-dom'

1. react由两部分组成： react 包和 react-dom ,语法都是ES6
2. import语法要放在页面最顶部
3. ReactDOM中有一个常用的方法，render()

JSX

什么是JSX

类xml语法的ECMAScript扩展

1. javascript+xml(html也是xml的一种)
2. JSX中html部分和原生html基本一样，但是不完全一样
3. JSX是语法糖，最后由babel编译成 React.createElement 这样可执行的JS代码，createElement 生成的对象被称为React elements

React.createElement(
    "h1",
    {className:'red'},
    "hello ",
    React.createElement(
        "span",
        {id:"world"},
        "world"
    )
)

JSX语法

1. 可以将JS表达式用花括号包起来，在JSX中使用
2. JSX代码换行时，建议使用圆括号包起来，避免自动插入分号时产生错误
3. JSX本身也是表达式，可以再if或for循环中使用、赋值给变量、作为函数的参数或者返回值。
4. JSX中两个相邻的JSX元素外层需要包裹一层元素
5. null在JSX中也是合法的元素，表示不存在

JSX中插入属性

1. 可以使用引号来声明字符串字面量类型的属性；或者使用花括号插入JS表达式类型的属性，但是不能同时使用引号和花括号
2. 普通属性和html一样
3. 特殊属性：class 和 for
4. style必须是一个对象类型
5. 危险的插入，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 组件

1. 封装组件的好处复用、组合、好维护
2. 组件声明的两种方式：类和函数，类声明的方式有this、状态和生命周期
3. 组件名首字母大写
4. react组件可以和JSX混用

function Build(props) { // "函数"(组件)的参数是属性
    return <p>{props.name} {props.age}</p>
}

组件的state

1. 在构造函数中初始化state
2. 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可以获取组件中的内容

1. 默认不传递，获取到时undefined
2. 传入一个时是对象类型，传入多个是数组
3. 可以使用React.Children.map去遍历

组件的生命周期

componentWillMount组件将要挂载：采用同步的方式获取本地数据（渲染之前获取数据，只渲染一次）
componentDidMount 组件渲染完成
shouldComponentUpdate(nextProps,nextState)
componentWillUnmount组件将要卸载，一般在这清除定时器和绑定事件。

受控组件与非受控组件

• 受控组件: 每当表单的状态发生改变时，都会写入state中
• 非受控组件：不受组件自身的state或props控制，通过为其添加ref来访问渲染后的底层DOM元素

---

组件的通信

父传子:

通过传递props

子传父：

通过回调函数:父通过属性传递子一个函数，儿子调用这个函数将值传递给父亲，父亲更新值，刷新视图。