react基础入门：(四)React操作DOM元素

原文链接：react基础入门：(四)React操作DOM元素

---

官网链接：https://react.docschina.org/

一 路由配置

1.1 入口 js 导入路由配置文件

// main.js 即项目入口文件
import React from 'react';
import RctDOM from 'react-dom';
import RouterMap from './routes';

RctDOM.render(<RouterMap />, document.getElementById('app'));

1.2 具体路由配置

// 路由配置
import React from 'react';
import { HashRouter, Route } from 'react-router-dom';
import Login from './login/login';
import Home from './home/home';

export default () => (
  <HashRouter>
    <div className="app">
      <Route exact path="/" component={Login} />
      <Route path="/login" component={Login} />
      <Route path="/home/:id" component={Home} />
    </div>
  </HashRouter>
);

1.3 启动项目

1. 访问http://localhost:3333/#/或者http://localhost:3333/#/login都可以访问到 login 页面；
2. 访问http://localhost:3333/#/home 即可访问到 home 页面；

二 生命周期

2.1 组建渲染

执行顺序	函数	描述
1	constructor	构造函数,组件实例化时设置初始化状态以及绑定类方法
2	componentWillMount	设置组件内部的状态，不会触发组件的再次渲染
3	render	组件被挂载或被更新的时调用，返回作为组件输出的元素
4	componentDidMount	仅在组件挂载后执行一次，用于发起异步请求获取 API 数据

2.2 组件更新

执行顺序	函数	描述
1	shouldComponentUpdate	组件状态或者属性更改时被调用，返回值决定页面是否需要重新渲染
2	componentWillUpdate	页面重新渲染前进行最后的准备工作
3	render	组件被挂载或被更新的时调用，返回作为组件输出的元素
4	componentDidUpdate	页面渲染后立即调用，可操作 DOM 或者执行更多异步请求

2.3 组件移除

执行顺序	函数	描述
1	componentWillUnmount	组件销毁之前被调用，执行一些必要的清理任务

三 页面操作

3.1 初始化 login 页面

import React from 'react';

class Login extends React.Component {
    /**
     * 组件初始化
     */
    constructor() {
        super();

        // 初始化数据
        this.state = {
            content: '初始化 login 。',
            style: {
                backgroundColor:'gray',
                width: '200px',
                height: '200px'
            }
        };

        // 绑定点击事件
        this.updateText = this.updateText.bind(this)
        this.updateStyle = this.updateStyle.bind(this)
        this.loginClick = this.loginClick.bind(this)
    }
   
    /**
     * 更新 文本
     */
    updateText() {
        this.setState({
            content: '更新 content 内容。'
        })
    }

    /**
     * 更新 样式
     */
    updateStyle() {
        const style = Object.assign({}, this.state.style, { backgroundColor: 'red' })
        this.setState({ style })
    }

    /**
     * 跳转到 home 页面
     * @param {*} e 点击事件 event
     */
    loginClick(e) {
        // 传递参数 id＝qbian
        this.props.history.push('/home/qbian')
    }

    render() {
        return (<div>
            <p>login page.</p>

            {/* 绑定样式style、内容 */}
            <div style={this.state.style}>{this.state.content}</div>
            <br/>
            {/* 绑定点击事件 */}
            <button onClick={this.updateText}>更新content文字</button>
            <button onClick={this.updateStyle}>更新content文字</button>

            <br/>
            <button onClick={this.loginClick}>跳转到 home 页面</button>
        </div>)
    }

}

export default Login;

3.2 初始化 home 页面

import React from 'react';
class Home extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            id: this.props.match.params.id // 获取 url 传递过来的参数
        }
    }

    render() {
        return <div>home page. query id={this.state.id}</div>;
    }
}

export default Home;

四 总结

通过今天的内容我们可以发现，react将整个页面组件化了，每个组件有自己的生命周期，在生命周期的不同时期做不同的事情，便于组件的自我管理。渲染显示也是以组件为单位，做到了页面的局部渲染。并且每个组件都是独立的，做到了组件的高度复用，便于构建大型的复杂的网站。通过路由配置可以访问不同页面，使整个网站更具层次性，配置性。

---

扫码关注有惊喜