走进React——React的样子

简介

React是一个可以快速构建响应式界面的UI库，基于组件化开发，可以让你的数据与界面很大程度的解耦，让你能只专注于数据，而不用去操心界面的展示。同时他也可以通过不同的渲染器来渲染你的react范式的代码，譬如react-native，他可以让用"react范式"写出原生应用，运行在各种移动设备中。

react的样子

其实react代码的样子很纯粹，纯粹到让你惊呼，这不就是html+js吗?是的，没有隔壁vue家的模板和众多的api，熟悉一下jsx,知道组件的生命周期钩子，你就可以用上手写出一下小应用了 一般来说，react组件经常使用jsx来编写，他的样子常常像下面这样：

// jsx
// 思考题，这里好像没用到“React”，那么可以不用引这个库了吗？只用“Component”行不行？
import React, {Component} from 'react'
import ReactDOM from 'react-dom'

default class Test extends Component{
    render(){
        return (
            <div>{this.props.test}</div>
        )
    }
}

ReactDOM.render(
    <Test test="一串字符" />,
    document.querySelector('#root')
);

其实，这还不是react真正的样子，jsx通过babal转义工具转义为js，真正的样子是这样的：

// js
import React, {Component} from 'react'
import ReactDOM from 'react-dom'

class Test extends Component{
    render(){
        // 现在知道为什么每次都要引入一个在jsx中都好像不会用到的React了吧
        return React.createElement(
            "div",
            this.props.test
        );
    }
}

ReactDOM.render(
    React.createElement(Test, {test: '一串字符'}),
    document.querySelector('#root')
)

state和props

组件内部的状态保存在state中，而外部传入的数据存放在props中，配合组件中的state和props可以构建出丰富多样的界面。 state和props会在进一步的文章中捎带说下

class ShowText extends React.Component{
    constructor(){
        super();
        this.state = {
            list: [
                'bar',
                'foo',
                'baz'
            ]
        }
    }
    render(){
        return (
            <div>
                <h3>{this.props.title}</h3>
                <ul>
                    {
                        this.state.list.map(msg => (<li key={msg}>{msg}</li>))
                    }
                </ul>
            </div>
        )
    }
}

ReactDOM.render(
    <ShowText title="展示列表"/>,
    document.querySelector('#root')
);

界面如下：

事件监听

同样的jsx支持监听事件，及使用回调函数，需要注意的是：React时间的命名采用销驼峰形式，而不是像html一样使用纯小写，使用jsx语法时，需要传入一个函数作为时间处理函数，而不是一个字符串

/**
 * 只有bind了，this才会实现react组件的实例中，才可以使用state、setState等api
 * 有三种bind方法
 */
class Test extends Component{
    constructor(){
        super();
        this.state = {}
        // 1、在constructor中bind方法
        this.handleClickMethod1 = this.handleClickMethod1.bind(this);
    }
    render(){
        return (
            <div>
                <button onClick={this.handleClickMethod1}>按钮1</button>
                {/* 2、绑定回调函数的时候bind一下 */}
                <button onClick={this.handleClickMethod2.bind(this, payload)}>按钮2</button>
                {/* 3、绑定一个箭头函数 */}
                <button onClick={(event) => this.handleClickMethod3(event, payload)}>按钮3</button>
                <button onClick={this.handleClickMethod4}>按钮4</button>
            </div>
        )
    }
    handleClickMethod1(event){
        console.log('method1');
    }
    handleClickMethod2(payload, event){ // event在所有参数之后
        console.log('method2');
    }
    handleClickMethod3(event, payload){// 参数按绑定传递的顺序
        console.log('method3');
    }
    // 4、用箭头函数，将作用域指向实例
    handleClickMethod4 = (event) => {
        console.log('method4');
    }
}

这四种bind方式各有千秋，我会在后续的走进React系列中详聊

生命周期

每个组件从创建到挂载都会有一系列的生命周期钩子被触发，这些钩子函数就给了我们在这个时机运行一些代码的机会。 比如这个conponentWillMount可以在组件即将被挂载到页面的时候执行，值得一提的是，这些生命周期钩子都是自动绑定实例的， 你不用担心this的指向问题

class Test extends Component{
    render(){
        return <div>hello world!</div>
    }
    componentWillMount(){
        console.log('will mount');
    }
}

在后续的文章中，将会更深入的谈谈组件中的生命周期

结语

一年没更新了，我已经无颜再见江东父老了，现在开个新坑，浅浅地说下react，也算自己对知识点和笔记的整理。

每次花个十分钟，懂一个React知识点，走得虽慢，只要坚持走下去，也足以致千里。