React.js入门与实战

虚拟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 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私属于当前组件，值可变