React笔记加报错

虚拟DOM

提升速度原因

https://www.zhihu.com/question/31809713/answer/53544875
diff 算法

1. 步骤一：用JS对象模拟DOM树
2. 步骤二：比较两棵虚拟DOM树的差异
3. 步骤三：把差异应用到真正的DOM树上

React组件

render()用于将模板转为 HTML 语言，并插入指定的 DOM 节点(主节点默认是Root)。
定义组件 + 导出组件。

export default class ComponentHeader extends React.Component{    render(){        return(            <header>                <h1>头部</h1>            </header>            )    }}

入口引用组件

import ComponentHeader from './js/components/header.js';class Index extends React.Component{    render(){        return (            <ComponentHeader></ComponentHeader>            )    }}// 绑定ReactDOM.render(<Index/>,document.getElementById('root'));

• return 返回必须只有一个节点，也就是不能有兄弟节点
  
  • 所以可以用一个div做一个包裹。
  • 组件化嵌套

JSX内置表达式，注释

html字符转义没有用处，可以使用Unicode转码
dangerouslySetInnerHTML注意大小写，可能存在XSS攻击危险

import React from 'react';export default class ComponentHeader extends React.Component{    render(){        var username = '含笑';        var boolInput = false;        var html = "1&nbsp;1";        return(            <header>                <p>{username == '' ? '用户名为空' : '用户名' + username}</p>                <input type="button" value= {username} disabled={boolInput} />                {html}                <div dangerouslySetInnerHTML = {{__html : html}}></div>            </header>            )    }}

生命周期

正确顺序componentWillMount(){        console.log('componentWillMount');    }render(){        console.log('render');  componentDidMount(){        console.log('componentDIDMount');    }

React属性与事件

State属性

state(页面状态)-virtual dom-Dom

作用域在存在于该组件，不污染其他组件class MessageBox extends Component {    constructor(){        super(); //调用基类的所有初始化方法        this.state = {messages:[            {id:1,name:"李四",content:"今天真凉快！",createAt:new Date()}        ]}    }

修改

 this.setState({})

props属性

数据绑定

使用es6的语法构建组件，那么在你组件里写的函数在构造器里都需要手动绑定this，如果使用es5的React.createClass()创建组件，this反而会自动绑定为当前组建实例。
如果是箭头函数就不需要bind(this)

第一种写法:_handleClick(e) {    console.log(this);}render() {    return (        <div>            <h1 onClick={this._handleClick.bind(this)}>点击</h1>        </div>    );}

第三种写法：_handleClick = (e) => {    // 使用箭头函数(arrow function)    console.log(this);}render() {    return (        <div>            <h1 onClick={this._handleClick}>点击</h1>        </div>    );}

在子页面（绑定）向父页面（父页面定义并且绑定.bind(this)）传参时，只能通过事件来执行

报错：TypeError: Super expression must either be null or a function, not undefined
解决：说明你extend的那个函数没有导出相应的属性
如果碰到这个问题不要去百度了，先做50个俯卧撑，因为你是单词写错了，出现这个问题百分之99.99是因为单词写错了，反正我是把Component写成了Compontent

• getDefaultProps通过组件调用方调用组件时指定，一旦指定一般情况下不会变，拥有者是调用方
• getInitalState私属于当前组件，值可变