组件模块化

回顾新闻点赞案列：
http://blog.youkuaiyun.com/github_26672553/article/details/76619122

父子组件

<h2>文章标题：{this.state.news.title}</h2>

我们可以把 新闻标题 部分HTML抽取处理，定义为一个专门的组件。

// 新闻标题组件
class Title extends React.Component{
    render(){
        return <div>
            <h2>文章标题：{this.props.title}</h2>
        </div>
    }
}

注意是用this.props.title获取。

在News组件里使用这个Title组件(Title就是子组件)：

// 在News组件里 用
 <Title title={this.state.news.title}/>
 // 替换
 <h2>文章标题：{this.state.news.title}</h2>

注意在组件的时间传递属性值。

OK，我们发现页面正常显示和为修改之前一样。说明我们的修改没有问题。
全部代码如下：

import React from 'react';
import ReactDOM from 'react-dom';
import axios from "axios";


// 定义新闻组件
class News extends React.Component{
    // 初始化
    constructor(props){
        super(props);

        this.state = {
            news: {}, // 新闻数据
            clickNum:0 // 点赞数
        };
    }

    // 组件渲染之前
    componentWillMount(){
        // ajax请求服务器获取新闻数据
        axios.get(
            "http://localhost/news.php",
            {params:{newsid:this.props.newsid}}
        )
        .then((res)=>{
            //console.log(res.data);
            this.setState({
                news: res.data, // 保存从服务器请求回来的数据
                clickNum:res.data.clickNum
            })
        })
    }

    // 渲染到页面
    render(){
        return <div>
            <Title title={this.state.news.title}/>
            <p>
                <span>创建时间：{this.state.news.created}</span> |
                点赞数：<a href="javascript:;" onClick={this.clickNumHandel.bind(this)}>{this.state.clickNum}</a>
            </p>
            <p>{this.state.news.desc}</p>
        </div>
    }

    //自定义函数处理 用户点赞动作
    clickNumHandel(){
        axios.post(
            "http://localhost/test.php",
            {params:{newsid:this.props.newsid}}
        )
            .then((res)=>{
                console.log(res.data);
                this.setState({
                    clickNum:res.data.clickNum  // 更新 点赞数
                })
            })
    }
}

// 新闻标题组件
class Title extends React.Component{
    render(){
        return <div>
            <h2>文章标题：{this.props.title}</h2>
        </div>
    }
}


// 最后渲染
ReactDOM.render(
    <News newid="101" />, // 使用组件
    document.getElementById('root')
);

我想你和我一样 看出来了 这个代码有点儿长了

组件模块化(分开到多个文件)

我们把 2个组件抽取处理
title.js标题组件：

import React from 'react';
export default  class Title extends React.Component{
    render(){
        return <div>
            <h2>文章标题：{this.props.title}</h2>
        </div>
    }
}

news.js新闻组件：

// 用到的引入
import React from 'react';
import axios from "axios";

// 引入组件
import Title from "./title";

export default class News extends React.Component{
    // 初始化
    constructor(props){
        super(props);

        this.state = {
            news: {}, // 新闻数据
            clickNum:0 // 点赞数
        };
    }

    // 组件渲染之前
    componentWillMount(){
        // ajax请求服务器获取新闻数据
        axios.get(
            "http://localhost/news.php",
            {params:{newsid:this.props.newsid}}
        )
            .then((res)=>{
                //console.log(res.data);
                this.setState({
                    news: res.data, // 保存从服务器请求回来的数据
                    clickNum:res.data.clickNum
                })
            })
    }

    // 渲染到页面
    render(){
        return <div>
            <Title title={this.state.news.title}/>
            <p>
                <span>创建时间：{this.state.news.created}</span> |
                点赞数：<a href="javascript:;" onClick={this.clickNumHandel.bind(this)}>{this.state.clickNum}</a>
            </p>
            <p>{this.state.news.desc}</p>
        </div>
    }

    //自定义函数处理 用户点赞动作
    clickNumHandel(){
        axios.post(
            "http://localhost/test.php",
            {params:{newsid:this.props.newsid}}
        )
            .then((res)=>{
                console.log(res.data);
                this.setState({
                    clickNum:res.data.clickNum  // 更新 点赞数
                })
            })
    }
}

最后在入口文件index.js：

import React from 'react';
import ReactDOM from 'react-dom';



// 引入News组件
import News from "./components/news";


// 最后渲染
ReactDOM.render(
    <News newid="101" />, // 使用组件
    document.getElementById('root')
);

入口文件一下子代码量少了很多。

分离完成查看页面没有任何不同。