前端组件化

一个简单的点赞功能

<!--用火狐浏览器打开-->
<div class="wrapper">
    <button class="btn">
        <span class="btn-text">点赞</span>
        <span>👍</span>
    </button>
</div> 

<script>
    const btn=document.querySelector('.btn');
    const btnText=btn.querySelector('.btn-text');
    let isLiked=false;

    btn.onclick=()=>{
        isLiked=!isLiked;
        if(isLiked) {
            btnText.innerHTML="取消";
        }else {
            btnText.innerHTML="点赞";
        }
    }
</script>

结构复用

<div class="wrapper"></div>
   
<script>
    class LikeButton {
        render() {
            return ` 
                <button class="btn">
                    <span class="btn-text">点赞</span>
                    <span>👍</span>
                </button>
            `
        }
    }

    const wrapper=document.querySelector('.wrapper');
    const likeButton1=new LikeButton();
    wrapper.innerHTML=likeButton1.render();

    const likeButton2=new LikeButton();
    wrapper.innerHTML+=likeButton2.render();
</script>

实现简单的组件化

<div class="wrapper"></div>
   
<script>
    const createDOMFromString=(domString)=>{
        const div=document.createElement('div');
        div.innerHTML=domString;
        return div;
    }

    class LikeButton {
        constructor() {
            this.state={
                isLiked:false
            };
        }

        changeText() {
            const btnText=this.el.querySelector('.btn-text');
            this.state.isLiked=!this.state.isLiked;
            btnText.innerHTML=this.state.isLiked?'取消':'赞成';
        }

        render() {
            this.el=createDOMFromString(`
                 <button class="btn">
                    <span class="btn-text">点赞</span>
                    <span>👍</span>
                </button>
            `);
            this.el.addEventListener('click', this.changeText.bind(this), false);
            return this.el; 
        }         
    }

    const wrapper=document.querySelector('.wrapper');
    const likeButton1=new LikeButton();
    wrapper.appendChild(likeButton1.render());

    const likeButton2=new LikeButton();
    wrapper.appendChild(likeButton2.render());
</script>

状态改变->构建新的DOM元素更新页面->重新插入新的DOM元素

<div class="wrapper"></div>
   
<script>
     const createDOMFromString=(domString)=>{
         const div=document.createElement('div');
         div.innerHTML=domString;
         return div;
     }

     class LikeButton {
         constructor() {
             this.state={
                 isLiked:false
             };
         }

         setState(state) {
             const oldEl=this.el;
             this.state=state;
             this.el=this.render();
            if (this.onStateChange) this.onStateChange(oldEl, this.el);
         }

         changeText() {
             this.setState({
                 isLiked:!this.state.isLiked
             });
         }

         render() {
             this.el=createDOMFromString(`
                  <button class="btn">
                     <span class="btn-text">${this.state.isLiked?'取消':'点赞'}</span>
                     <span>👍</span>
                  </button>
             `);
             this.el.addEventListener('click', this.changeText.bind(this), false);
             return this.el; 
         }    
     }

     const wrapper=document.querySelector('.wrapper');
     const likeButton1=new LikeButton();
     likeButton1.onStateChange = (oldEl, newEl) => {
        wrapper.insertBefore(newEl, oldEl) // 插入新的元素
        wrapper.removeChild(oldEl) // 删除旧的元素
     }
     wrapper.appendChild(likeButton1.render());

     const likeButton2=new LikeButton();
     likeButton2.onStateChange = (oldEl, newEl) => {
           wrapper.insertBefore(newEl, oldEl) // 插入新的元素
           wrapper.removeChild(oldEl) // 删除旧的元素
     }
     wrapper.appendChild(likeButton2.render());
 </script>

搭建开发环境

// 安装create-react-app工具（一键生成所需要的工程目录，并做好各种配置和依赖）
// 工具地址：https://github.com/facebookincubator/create-react-app
npm install -g create-react-app

// 把npm的源改成taobao的源
npm config set registry https://registry.npm.taobao.org

// 通过create-react-app命令创建一个名为hello-react的工程
create-react-app hello-react

// 进入工程目录然后通过npm启动工程
cd hello-react
npm start

// http://localhost:3000/
// http://192.168.1.11:3000/

使用JSX描述UI信息

JSX原理

要点：
1.每个DOM元素的结构都可以用JS对象来表示。
2.编译的过程会把类似HTML的JSX结构转换成JS的对象结构。
3.JSX是JS语言的一种语法扩展。

组件的render方法

表达式插入

要点：
1.{}内可以放任何JS的代码。
2.表达式插入不但可以用在标签内部，也可以用在标签的属性上。
3.如果插入的表达式返回null，那么React会什么都不显示，相当于忽略了该表达式的插入。结合条件返回，可以做到显示或隐藏某些元素。

条件返回

{}内也可以放置JSX。

JSX元素变量（即JS对象）

可赋值给变量、作为函数参数传递、作为函数的返回值。

组件的组合、嵌套和组件树

事件监听

要点：
1.React封装了一系列的on*的属性（若没有经过处理，这些on*的事件监听只能用在普通的HTML的标签上，而不能用在组件标签上），地址：https://facebook.github.io/react/docs/events.html#supported-events。
2.事件属性名都必须要用驼峰命名法。

event对象

和普通浏览器一样，事件监听函数会被自动传入一个event对象（event对象并不是由浏览器所提供，而是由react内部所创建）。

关于事件中的this

要点：
1.React调用你所传给它的方法的时候，并不是通过对象方法的方式调用（this.handleClick），而是直接通过函数调用（handleClick），所以事件监听函数内并不能通过this获取到实例。
2.如果你想在事件函数当中使用当前的实例，你需要手动地将实例方法bind到当前实例上再传入给React的onClick事件监听，也可以在bind的时候给事件监听函数传入一些参数。

组件的state和setState

state

一个组件的显示形态是可以由它数据状态和配置参数决定的。

setState接收对象参数

要点：
1.setState方法由父类所提供。当我们调用这个函数的时候，React会更新组件的状态state，并且重新调用render方法，然后再把render方法所渲染的最新的内容显示到页面上。
2.接收一个对象或者函数作为参数。
3.传入一个对象的时候，这个对象表示该组件的新状态。但你只需要传入需要给更新的部分就可以了，而不需要传入整个对象。

setState接收函数参数

当你调用setState的时候，React并不会马上修改state。而是把这个对象放到一个更新队列里面，稍后才会从队列当中把新的状态提取出来合并到state当中，然后再触发组件更新。

setState合并

React内部会把JS事件循环中的消息队列的同一个消息中的setState都进行合并以后再重新渲染组件，因此不用担心多次进行setState会带来性能问题。

配置组件的props

要点：
1.每个组件都接收一个props参数，它是一个对象，包含了所有你对这个组件的配置。
2.组件内部通过this.props的方式获取到组件的参数。
3.在使用一个组件的时候，可以把参数放在标签的属性当中，所有的属性都会作为props对象的键值。
4.可以把任何类型的数据作为组件的参数，包括字符串、数字、对象、数组、甚至是函数等等。

默认配置defaultProps

里面是对props中各个属性的默认配置。

props不可变

props一旦传入，你就不可以在组件内部对它进行修改。但是你可以通过父组件主动重新渲染的方式来传入新的props，从而达到更新的效果。

state vs props

要点：
1.state的主要作用是用于组件保存、控制、修改自己的可变状态。（state是让组件控制自己的状态）
2.props的主要作用是让使用该组件的父组件可以传入参数来配置该组件。（props是让外部对组件自己进行配置）
3.尽量少用state，尽量多用props。
4.没有state的组件叫无状态组件，设置了state的叫做有状态组件。

渲染列表数据

渲染存放JSX元素的数组

<div id="box"></div>
<!--如果往{}中放入一个数组，React会帮你把数组里面的元素一个个的罗列并渲染出来-->    
<script type="text/babel">
    class Index extends React.Component {
        render() {
            return (
                <div>
                    {
                        [
                            <span>i </span>,
                            <span>love </span>,
                            <span>react</span>
                        ]
                    }
                </div>
            )
        }
    }

    ReactDOM.render(
        <Index />,
        document.getElementById('box')
    )
</script>

使用map渲染列表数据

 <div id="box"></div>
    
 <script type="text/babel">
     const users=[
        {
            username:'osoLife',
            age:18,
            sex:'male'
        },
        {
            username:'michael',
            age:28,
            sex:'female'
        },
        {
            username:'moli',
            age:38,
            sex:'male'
        }
    ]

    class Index extends React.Component {         
        render() {
            const arr=[];
            // 循环每个用户，构建JSX，push到数组中
            for(let user of users) {
                arr.push(
                    <div>
                        <div>姓名：{user.username}</div>
                        <div>年龄：{user.age}</div>
                        <div>性别：{user.sex}</div>
                        <hr/>
                    </div>
                );
            }

            return (
               <div>{arr}</div>
            )
        }
    }

    ReactDOM.render(
        <Index />,
        document.getElementById('box')
    )
</script>

<div id="box"></div>

<script type="text/babel">
    const users=[
        {
            username:'osoLife',
            age:18,
            sex:'male'
        },
        {
            username:'michael',
            age:28,
            sex:'female'
        },
        {
            username:'moli',
            age:38,
            sex:'male'
        }
    ]

    class Index extends React.Component {         
        render() {
            return (
                <div>
                   {
                        users.map(
                            (user)=>{
                                return (
                                    <div>
                                        <div>姓名：{user.username}</div>
                                        <div>年龄：{user.age}</div>
                                        <div>性别：{user.sex}</div>
                                        <hr/>
                                    </div>
                                )
                            }
                        )
                   }
                </div>
            )
        }
    }

    ReactDOM.render(
        <Index />,
        document.getElementById('box')
    )
</script>

<div id="box"></div>

<script type="text/babel">
    const users=[
        {
            username:'osoLife',
            age:18,
            sex:'male'
        },
        {
            username:'michael',
            age:28,
            sex:'female'
        },
        {
            username:'moli',
            age:38,
            sex:'male'
        }
    ]

    class User extends React.Component {
        render() {
            const {user}=this.props;
            return (
                <div>
                    <div>姓名：{user.username}</div>
                    <div>年龄：{user.age}</div>
                    <div>性别：{user.sex}</div>
                    <hr/>
                </div>
            );
        }
    }

    class Index extends React.Component {         
        render() {
            return (
                <div>
                    {
                        users.map(
                            (user)=><User user={user} />
                        )
                    }
                </div>
            );
        }
    }

    ReactDOM.render(
        <Index />,
        document.getElementById('box')
    )
</script>

<!--对于用表达式套数组罗列到页面上的元素，都要为每个元素加上key属性，这个key必须是每个元素唯一的标识-->

实战分析：评论功能（一）

组件划分

React中一切都是组件，用React构建的功能其实就是由各种组件组合而成。

组件实现

// 构建一个新的工程目录
create-react-app comment-app

// 在工程目录下的src/目录下新建四个文件
CommentApp.js
CommentInput.js
CommentList.js
Comment.js

// CommentApp.js
import React,{ Component } from 'react';
import CommentInput from './CommentInput';
import CommentList from './CommentList';

class CommentApp extends React.Component {
    render() {
        return (
            <div>
                <CommentInput />
                <CommentList />
            </div>
        )
    }
}

export default CommentApp

// CommentInput.js
import React,{ Component } from 'react';

class CommentInput extends React.Component {
    render() {
        return (
            <div>CommentInput</div>
        )
    }
}

export default CommentInput

// CommentList.js
import React,{ Component } from 'react';

class CommentList extends React.Component {
    render() {
        return (
            <div>CommentList</div>
        )
    }
}

export default CommentList

// 修改src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import CommentApp from './CommentApp';
import './index.css';

ReactDOM.render(
    <CommentApp />,
    document.getElementById('root')    
)

// 进入工程目录启动工程
npm run start

添加样式

// 修改CommentApp中的render方法，给它添加一个wrapper类名
import React,{ Component } from 'react';
import CommentInput from './CommentInput';
import CommentList from './CommentList';

class CommentApp extends React.Component {
    render() {
        return (
            <div className="wrapper">
                <CommentInput />
                <CommentList />
            </div>
        )
    }
}

export default CommentApp

// index.css
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #fbfbfb;
}
.wrapper {
  width: 500px;
  margin: 10px auto;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
}

实战分析：评论功能（二）

处理用户输入

// 修改ComponentInput.js
import React,{ Component } from 'react';

class CommentInput extends React.Component {
    render() {
        return (
            <div className="comment-input">
                <div className="comment-field">
                    <span className="comment-field-name">用户名：</span>
                    <div className="comment-field-input">
                        <input />
                    </div>
                </div>
                <div className="comment-field">
                    <span className="comment-field-name">评论内容：</span>
                    <div className="comment-field-input">
                        <textarea />
                    </div>
                </div>
                <div className="comment-field-button">
                    <button>
                        发布
                    </button>
                </div>
            </div>
        )
    }
}

export default CommentInput

// 修改index.css
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #fbfbfb;
}

.wrapper {
  width: 500px;
  margin: 10px auto;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
}

/* 评论框样式 */
.comment-input {
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
  margin-bottom: 10px;
}

.comment-field {
  margin-bottom: 15px;
  display: flex;
}

.comment-field .comment-field-name {
  display: flex;
  flex-basis: 100px;
  font-size: 14px;
}

.comment-field .comment-field-input {
  display: flex;
  flex: 1;
}

.comment-field-input input,
.comment-field-input textarea {
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  padding: 5px;
  outline: none;
  font-size: 14px;
  resize: none;
  flex: 1;
}

.comment-field-input textarea {
  height: 100px;
}

.comment-field-button {
  display: flex;
  justify-content: flex-end;
}

.comment-field-button button {
  padding: 5px 10px;
  width: 80px;
  border: none;
  border-radius: 3px;
  background-color: #00a3cf;
  color: #fff;
  outline: none;
  cursor: pointer;
}

.comment-field-button button:active {
  background: #13c1f1;
}

/* 评论列表样式 */
.comment-list {
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
}

/* 评论组件样式 */
.comment {
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 10px;
  padding-bottom: 10px;
  min-height: 50px;
}

.comment .comment-user {
  flex-shrink: 0;
}

.comment span {
  color: #00a3cf;
  font-style: italic;
}

.comment p {
  margin: 0;
  /*text-indent: 2em;*/
}

// 加入处理逻辑
import React,{ Component } from 'react'

class CommentInput extends Component {
    constructor() {
        super();
        this.state={
            username:'',
            content:''
        };
    }

    handleUsernameChange(event) {
        this.setState({
            username:event.target.value
        });
    }

    handleContentChange(event) {
        this.setState({
            content:event.target.value
        });
    }

    handleSubmit() {
        if(this.props.onSubmit) {
            const {username,content}=this.state;
            this.props.onSubmit({username,content});
        };
        this.setState({content:''});
    }

    render() {
        return (
            <div className="comment-input">
                <div className="comment-field">
                    <span className="comment-field-name">用户名：</span>
                    <div className="comment-field-input">
                        <input value={this.state.username} onChange={this.handleUsernameChange.bind(this)} />
                    </div>
                </div>
                <div className="comment-field">
                    <span className="comment-field-name">评论内容：</span>
                    <div className="comment-field-input">
                        <textarea value={this.state.content} onChange={this.handleContentChange.bind(this)} />
                    </div>
                </div>
                <div className="comment-field-button">
                    <button onClick={this.handleSubmit.bind(this)}>
                        发布
                    </button>
                </div>
            </div>
        )
    }
}

export default CommentInput

// 要点：
1.<input />、<textarea />、<select />这样的输入控件被设置了value值，那么它们的值永远以被设置的值为准，值不变，value就不会变化。
2.类似于<input />、<select />、<textarea>这些元素的value值被React所控制、渲染的组件，在React当中被称为受控组件。

向父组件传递数据

// 修改CommentApp.js
import React,{ Component } from 'react'
import CommentInput from './CommentInput'
import CommentList from './CommentList'

class CommentApp extends Component {
    handleSubmitComment(comment) {
        console.log(comment);
    }

    render() {
        return (
            <div className="wrapper">
                <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
                <CommentList />
            </div>
        );
    }
}

export default CommentApp

实战分析：评论功能（三）

// 修改CommentList.js
import React,{ Component } from 'react'

class CommentList extends Component {
    render() {
        const comments=[
            {
                username:'osoLife',
                content:'i'
            },
            {
                username:'moli',
                content:'love'
            },
            {
                username:'michael',
                content:'react'
            }
        ];

        return (
            <div>
                {
                    comments.map(
                        (comment,i)=>{
                            return (
                                <div key={i}>
                                    {comment.username}:{comment.content}
                                </div>
                            )
                        }
                    )
                }
            </div>
        );
    }
}

export default CommentList

// 修改Comment.js
import React,{ Component } from 'react';

class Comment extends Component {
    render() {
        return (
            <div className="comment">
                <div className="comment-user">
                    <span>{this.props.comment.username} </span>:
                </div>
                <p>{this.props.comment.content}</p>
            </div>
        )
    }
}

export default Comment

// 修改CommentList.js
import React,{ Component } from 'react';
import Comment from './Comment';

class CommentList extends Component {
    // 防止comments不传入的情况
    static defaultProps={
        comments:[]
    }
    
    // 删除测试数据，改成props获取评论数据
    render() {
        return (
            <div>
                {
                    this.props.comments.map(
                        (comment,i)=><Comment comment={comment} key={i} />
                    )
                }
            </div>
        );
    }
}

export default CommentList

// 修改CommentApp.js
import React,{ Component } from 'react'
import CommentInput from './CommentInput'
import CommentList from './CommentList'

class CommentApp extends Component {
    constructor() {
        super();
        this.state={
            comments:[]
        }
    }

    handleSubmitComment(comment) {
        this.state.comments.push(comment);
        this.setState({
            comments:this.state.comments
        })
    }

    render() {
        return (
            <div className="wrapper">
                <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
                <CommentList comments={this.state.comments} />
            </div>
        );
    }
}

export default CommentApp

// 给handleSubmitComment加入简单的数据检查
handleSubmitComment(comment) {
    if(!comment) {
        return;
    }

    if(!comment.username) {
        return alert('请输入用户名');
    }

    if(!comment.content) {
        return alert('请输入评论内容');
    }

    this.state.comments.push(comment);
    this.setState({
        comments:this.state.comments
    });
}

前端应用状态管理——状态提升

当某个状态被多个组件依赖或者影响的时候，就把该状态提升到这些组件的最近公共组件中去管理，用props传递数据或者函数来管理这种依赖或者影响的行为。

挂载阶段的组件生命周期（一）

React将组件渲染，并且构造DOM元素然后塞入页面的过程称为组件的挂载。

// 一个组件的方法调用过程
-> constructor()
-> render()
// 然后构造DOM元素插入页面

-> constructor()
-> componentWillMount()
-> render()
// 然后构造DOM元素插入页面
-> componentDidMount()
// ...
// 即将从页面中删除
-> componentWillUnmount()
// 从页面中删除

<div id="box"></div>

<script type="text/babel">
    class Header extends React.Component {
        constructor() {
            super();
            console.log('constructor');
        }

        componentWillMount() {
            console.log('component will mount');
        }

        componentDidMount() {
            console.log('component did mount');
        }

        render() {
            console.log('render');
            return (
                <div>
                    <h1 className="title">osoLife</h1>
                </div>
            );
        }          
    }

    ReactDOM.render(
        <Header />,
        document.getElementById("box")
    )
</script>

<div id="box"></div>

<script type="text/babel">
    class Header extends React.Component {
        constructor() {
            super();
            console.log('constructor');
        }

        componentWillMount() {
            console.log('component will mount');
        }

        componentDidMount() {
            console.log('component did mount');
        }

        componentWillUnmount() {
            console.log('component will unmount');
        }

        render() {
            console.log('render');
            return (
                <div>
                    <h1 className="title">osoLife</h1>
                </div>
            )
        }          
    }

    class Index extends React.Component {
        constructor() {
            super();
            this.state={
                isShowHeader:true
            };
        }

        handleShowOrHide() {
            this.setState({
                isShowHeader:!this.state.isShowHeader
            }); 
        }

        render() {
            return (
                <div>
                    {this.state.isShowHeader ? <Header />:null}
                    <button onClick={this.handleShowOrHide.bind(this)}>
                        显示或者隐藏标题
                    </button>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Index />,
        document.getElementById('box')
    )
</script>

<!--React控制了组件的删除过程，在组件删除之前调用组件定义的componentWillUnmount-->

挂载阶段的组件生命周期（二）

<div id="box"></div>

<script type="text/babel">
    class Clock extends React.Component {
        constructor() {
            super();
            this.state={
                date:new Date()
            };
        }

        componentWillMount() {
           this.timer=setInterval(()=>{
               this.setState({
                   date:new Date()
               });
           },1000)
        }

        render() {
            return (
                <div>
                   <h1>
                        <p>现在的时间是</p>
                        {this.state.date.toLocaleTimeString()}
                   </h1>
                </div>
            );
        }
    }

    class Index extends React.Component {
        render() {
            return (
                <div>
                    <Clock />
                </div>
            );
        }
    }

    ReactDOM.render(
        <Index />,
        document.getElementById('box')
    )
</script>

<div id="box"></div>

<script type="text/babel">
    class Clock extends React.Component {
        constructor() {
            super();
            this.state={
                date:new Date()
            };
        }

        // 在componentWillMount进行组件的启动工作，例如Ajax数据拉取、定时器的启动
        componentWillMount() {
           this.timer=setInterval(()=>{
               this.setState({
                   date:new Date()
               });
           },1000);
        }

        // 组件从页面上销毁的时候，需要一些数据的清理，例如定时器的清理
        componentWillUnmount() {
            clearInterval(this.timer);
        }

        render() {
            return (
                <div>
                   <h1>
                        <p>现在的时间是</p>
                        {this.state.date.toLocaleTimeString()}
                   </h1>
                </div>
            );
        }
    }

    class Index extends React.Component {
        constructor() {
            super();
            this.state={
                isShowClock:true
            };
        }

        handleShowOrHide() {
            this.setState({
                isShowClock:!this.state.isShowClock
            });
        }

        render() {
            return (
                <div>
                   {this.state.isShowClock ? <Clock />:null}
                   <button onClick={this.handleShowOrHide.bind(this)}>
                        显示或隐藏时钟
                   </button>
                </div>
            );
        }
    }

    ReactDOM.render(
        <Index />,
        document.getElementById('box')
    )
</script>

更新阶段的组件生命周期

// 组件的挂载指的是将组件渲染并且构造DOM元素然后插入页面的过程，这是一个从无到有的过程。React提供一些生命周期函数可以给我们在这个过程中做一些操作。除了挂载阶段，还有一种“更新阶段”。

// 更新阶段的组件生命周期：
1.shouldComponentUpdate(nextProps,nextState)：通过这个方法可以控制组件是否重新渲染，如果返回false组件就不会重新渲染。
2.componentWillReceiveProps(nextProps)：组件从父组件接收到新的props之前调用。
3.componentWillUpdate()：组件开始重新渲染之前调用。
4.componentDidUpdate()：组件重新渲染并且把更改变更到真实的DOM以后调用。

ref和React中的DOM操作

// 通过ref属性来获取已经挂载的元素的DOM节点
// 原则：能不用ref就不用
<div id="box"></div>

<script type="text/babel">
    class AutoFocusInput extends React.Component {
        componentDidMount() {
            this.input.focus();
        }

        render() {
            return (
                <input ref={(input)=>this.input=input} />
            );
        }
    }

    ReactDOM.render(
        <AutoFocusInput />,
        document.getElementById("box")
    )
</script>

<!--可以给组件标签加上ref，这样获取到的是组件在React内部初始化的实例-->

props.children和容器类组件

<!--组件本身是一个不带任何内容的方形容器，我们可以在用这个组件的时候给它传入任意内容 -->
<!--通过给Card组件传入一个content属性，这个属性可以传入任意的JSX结构，然后在Card内部会通过{this.props.content}把内容渲染到页面上-->
<div id="box"></div>

<script type="text/babel">
    class Card extends React.Component {
        render() {
            return (
                <div className="card">
                    <div className="card-content">
                        {this.props.content}
                    </div>
                </div>
            )
        }
    }

    ReactDOM.render(
        <Card content={
            <div>
                <h2>osoLife</h2>
                <div>一个前端工程师</div>
                订阅我：<input />
            </div>
        } />,
        document.getElementById("box")
    )
</script>

<!--问题：如果Card除了content以外还能传入其它属性的话，那么这些JSX和其它属性就会混在一起，不好维护-->

// React会把嵌套的JSX元素一个个都放到数组当中，然后通过props.children传给了Card。
// 由于JSX会把插入表达式里面数组中的JSX一个个罗列下来显示。
// 所有嵌套在组件中的JSX结构都可以在组件内部通过props.children获取到。
<div id="box"></div>

<script type="text/babel">
    class Card extends React.Component {
        render() {
            return (
                <div className="card">
                    <div className="card-content">
                        {this.props.children}
                    </div>
                </div>
            )
        }
    }  

    ReactDOM.render(
        <Card>
            <h2>osoLife</h2>
            <div>一个前端工程师</div>
            订阅我：<input />
        </Card>,
        document.getElementById("box")  
    )      
</script>

// 在组件内部把数组中的JSX元素安置在不同的地方示例：
<div id="box"></div>

<script type="text/babel">
    class Layout extends React.Component {
        render() {
            return (
                <div className="two-cols-layout">
                    <div className="sidebar">
                        {this.props.children[0]}
                    </div>
                    <div className="main">
                        {this.props.children[1]}
                    </div>
                </div>
            )
        }
    }
</script>

dangerouslySetHTML和style属性

dangerouslySetHTML

// 出于安全考虑的原因（XSS攻击），在React当中所有的表达式插入的内容都会被自动转义。
<div id="box"></div>

<script type="text/babel">
    class Editor extends React.Component {
        constructor() {
            super();
            this.state={
                content:'<h1>osoLife</h1>'
            }
        }

        render() {
            return (
                <div className="editor-wrapper">
                    {this.state.content}
                </div>
            )
        }
    }
</script>

// 通过dangerouslySetInnerHTML属性动态设置元素的innerHTML（给dangerouslySetInnerHTML传入一个对象，这个对象的__html属性值就相当于元素的innerHTML）
<div id="box"></div>

<script type="text/babel">
    class Editor extends React.Component {
        constructor() {
            super();
            this.state={
                content:'<h1>osoLife</h1>'
            }
        }

        render() {
            return (
                <div className="editor-wrapper"
                    dangerouslySetInnerHTML={{
                    __html:this.state.content
                }} />
            )
        }
    }

    ReactDOM.render(
        <Editor />,
        document.getElementById("box")
    )
</script>

style

// 需要把CSS属性变成一个对象再传给元素（原来CSS属性中带“-”的元素都必须去掉“-”换成驼峰命名）
<h1 style={{fontSize:'12px',color:'red'}}>osoLife</h1>

PropTypes和组件参数验证

// 安装第三方库：prop-types
npm install --save prop-types

// 给组件的配置参数加上类型验证
import React,{ Component } from 'react';
import PropTypes from 'prop-types';

class Comment extends Component {
    static propTypes={
        comment:PropTypes.object
    }

    render() {
        const { comment }=this.props;
        return (
            <div className="comment">
                <div className="comment-user">
                    <span>{comment.username} </span> :
                </div>
                <p>{comment.content}</p>
            </div>
        )
    }
}

export default Comment
// 可选参数我们可以通过配置defaultProps，让它在不传入的时候有默认值。

import React,{ Component } from 'react';
import PropTypes from 'prop-types';

class Comment extends Component {
    // 通过isRequired关键字来强制组件某个参数必须传入
    static propTypes={
        comment:PropTypes.object.isRequired
    }

    render() {
        const { comment }=this.props;
        return (
            <div className="comment">
                <div className="comment-user">
                    <span>{comment.username} </span> :
                </div>
                <p>{comment.content}</p>
            </div>
        )
    }
}

export default Comment

// PropTypes提供了一系列的数据类型可以用来配置组件的参数
PropTypes.array
PropTypes.bool
PropTypes.func
PropTypes.number
PropTypes.object
PropTypes.string
PropTypes.node
PropTypes.element
...

实战分析：评论功能（四）

// index.css
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background-color: #fbfbfb;
}

.wrapper {
  width: 500px;
  margin: 10px auto;
  font-size: 14px;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
}

/* 评论框样式 */
.comment-input {
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
  margin-bottom: 10px;
}

.comment-field {
  margin-bottom: 15px;
  display: flex;
}

.comment-field .comment-field-name {
  display: flex;
  flex-basis: 100px;
  font-size: 14px;
}

.comment-field .comment-field-input {
  display: flex;
  flex: 1;
}

.comment-field-input input,
.comment-field-input textarea {
  border: 1px solid #e6e6e6;
  border-radius: 3px;
  padding: 5px;
  outline: none;
  font-size: 14px;
  resize: none;
  flex: 1;
}

.comment-field-input textarea {
  height: 100px;
}

.comment-field-button {
  display: flex;
  justify-content: flex-end;
}

.comment-field-button button {
  padding: 5px 10px;
  width: 80px;
  border: none;
  border-radius: 3px;
  background-color: #00a3cf;
  color: #fff;
  outline: none;
  cursor: pointer;
}

.comment-field-button button:active {
  background: #13c1f1;
}

/* 评论列表样式 */
.comment-list {
  background-color: #fff;
  border: 1px solid #f1f1f1;
  padding: 20px;
}

/* 评论组件样式 */
.comment {
  position: relative;
  display: flex;
  border-bottom: 1px solid #f1f1f1;
  margin-bottom: 10px;
  padding-bottom: 10px;
  min-height: 50px;
}

.comment .comment-user {
  flex-shrink: 0;
}

.comment-username {
  color: #00a3cf;
  font-style: italic;
}

.comment-createdtime {
  padding-right: 5px;
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 5px;
  font-size: 12px;
}

.comment:hover .comment-delete {
  color: #00a3cf;
}

.comment-delete {
  position: absolute;
  right: 0;
  top: 0;
  color: transparent;
  font-size: 12px;
  cursor: pointer;
}

.comment p {
  margin: 0;
  /*text-indent: 2em;*/
}

code {
  border: 1px solid #ccc;
  background: #f9f9f9;
  padding: 0px 2px;
}

自动聚焦到评论框

// 修改CommentInput.js
// 给输入框元素加上ref以便获取到DOM元素
...
<textarea ref={(textarea)=>this.textarea=textarea} value={this.state.content} onChange={this.handleContentChange.bind(this)} />
...

// 给CommentInput组件加上ComponentDidMount生命周期
static propTypes={
    onSubmit:PropTypes.func
}

componentDidMount() {
    this.textarea.focus()
}

持久化用户名

// 监听用户名输入框失去焦点事件onBlur
<input value={this.state.username} onBlur={this.handleUsernameBlur.bind(this)} onChange={this.handleUsernameChange.bind(this)} />

// 在handleUsernameBlur中把用户的输入内容保存到LocalStorage当中
// 在handleUsernameBlur中把用户输入的内容传给_saveUsername私有方法（所有私有方法都以_开头）。
_saveUsername(username) {
    localStorage.setItem('username',username)
}

handleUsernameBlur(event) {
    this._saveUsername(event.target.value)
}

handleUsernameChange(event) {
    this.setState({
        username:event.target.value
    });
}

componentWillMount() {
    this._loadUsername()
}

_loadUsername() {
    const username=localStorage.getItem('username')
    if(username) {
        this.setState({
            username
        })
    }
}

// 规范：
组件的私有方法都用“_”开头，所有事件监听的方法都用handle开头，把事件监听方法传给组件的时候，属性名用on开头。

// 组件的内容编写顺序：
1.static开头的类属性，如defaultProps、propTypes。
2.构造函数，constructor。
3.getter/setter。
4.组件生命周期。
5._开头的私有方法。
6.事件监听方法，handle*。
7.render*开头的方法，有时候render()方法里面的内容会分开到不同函数里面进行，这些函数都以render*开头。
8.render()方法。

完整代码

// CommentApp.js
import React, { Component } from 'react';
import CommentInput from './CommentInput';
import CommentList from './CommentList';

class CommentApp extends Component {
  constructor() {
    super();
    this.state = {
      comments: []
    };
  }

  handleSubmitComment(comment) {
    if(!comment) {
        return;
    } 
    if (!comment.username) {
        return alert('请输入用户名');
    } 
    if (!comment.content) {
        return alert('请输入评论内容');
    } 
    this.state.comments.push(comment);
    this.setState({
      comments: this.state.comments
    });
  }

  render() {
    return (
      <div className='wrapper'>
        <CommentInput onSubmit={this.handleSubmitComment.bind(this)} />
        <CommentList comments={this.state.comments} />
      </div>
    )
  }
}

export default CommentApp

// CommentInput.js
import React, { Component } from 'react';
import PropTypes from 'prop-types';

class CommentInput extends Component {
  static propTypes={
    onSubmit:PropTypes.func
  }

  constructor() {
    super();
    this.state={
      username: '',
      content: ''
    };
  }
  
  componentWillMount() {
      this._loadUsername();
  }

  componentDidMount() {
      this.textarea.focus();
  }

  _saveUsername(username) {
      localStorage.setItem('username',username);
  }

  _loadUsername() {
      const username=localStorage.getItem('username');
      if(username) {
          this.setState({
              username
          })
      };
  }

  handleUsernameChange(event) {
    this.setState({
      username: event.target.value
    })
  }

  handleUsernameBlur(event) {
      this._saveUsername(event.target.value)
  }

  handleContentChange(event) {
    this.setState({
      content: event.target.value
    })
  }

  handleSubmit() {
    if (this.props.onSubmit) {
      this.props.onSubmit({
        username: this.state.username,
        content: this.state.content,
      })
    }
    this.setState({ content: '' })
  }

  render() {
    return (
      <div className='comment-input'>
        <div className='comment-field'>
          <span className='comment-field-name'>用户名：</span>
          <div className='comment-field-input'>
            <input
              value={this.state.username}
              onBlur={this.handleUsernameBlur.bind(this)}
              onChange={this.handleUsernameChange.bind(this)} />
          </div>
        </div>
        <div className='comment-field'>
          <span className='comment-field-name'>评论内容：</span>
          <div className='comment-field-input'>
            <textarea
              ref={(textarea)=>this.textarea=textarea}
              value={this.state.content}
              onChange={this.handleContentChange.bind(this)} />
          </div>
        </div>
        <div className='comment-field-button'>
          <button
            onClick={this.handleSubmit.bind(this)}>
            发布
          </button>
        </div>
      </div>
    )
  }
}

export default CommentInput

// CommentList.js
import React, { Component } from 'react';
import Comment from './Comment';

class CommentList extends Component {
  static defaultProps={
    comments: []
  }

  render() {
    return (
      <div>
        {this.props.comments.map((comment, i) =>
          <Comment comment={comment} key={i} />
        )}
      </div>
    )
  }
}

export default CommentList

// Comment.js
import React,{ Component } from 'react';

class Comment extends Component {
  render() {
    return (
      <div className='comment'>
        <div className='comment-user'>
          <span>{this.props.comment.username} </span>：
        </div>
        <p>{this.props.comment.content}</p>
      </div>
    )
  }
}

export default Comment

实战分析：评论功能（五）

持久化评论

高阶组件

// 高阶组件就是一个函数，传给它一个组件，它返回一个新的组件
// 高阶组件的作用是用于代码复用，可以把组件之间可复用的代码、逻辑抽离到高阶组件当中。新的组件和传入的组件通过props传递信息
const NewComponent=higherOrderComponent(OldComponent)

// 一个简单的高阶组件
import React,{ Component } from 'react';

export default (WrappendComponent)=>{
    class NewComponent extends Component {
        render() {
            return <WrappendComponent />
        }
    }
    return NewComponent;
}

// 给NewComponent做一些数据启动工作
import React,{ Component } from 'react';

export default (WrappendComponent,name)=>{
    class NewComponent extends Component {
        constructor() {
            super();
            this.state={
                data:null
            }
        }

        componentWillMount() {
            let data=localStorage.getItem(name);
            this.setState({
                data
            })
        }

        render() {
            return <WrappendComponent data={this.state.data} />
        }
    }
    return NewComponent;
}
<!--现在NewComponent会根据第二个参数name在挂载阶段从LocalStorage加载数据-->

// 假设上面的代码是在src/wrapWithLoadData.js文件中，我们在别的地方这么用它
import wrapWithLoadData from './wrapWithLoadData';

class InputWithUserName extends Component {
    render() {
        return <input value={this.props.data} />
    }
}

InputWithUserName=wrapWidthLoadData(InputWithUserName,'username')
export default InputWithUserName

// 别人用这个组件的时候实际是用了被加工过的组件
import InputWithUserName from './InputWithUserName';

class Index extends Component {
    render() {
        return (
            <div>
                用户名：<InputWithUserName />
            </div>
        )
    }
}

context

// 一个组件可以通过getChildContext方法返回一个对象，这个对象就是子树的context，提供context的组件必须提供childContextTypes作为context的声明和验证。
// 一个组件的context只有它的子组件能够访问，它的父组件是不能访问的。
// 就如全局变量一样，context里面的数据能被随意接触就能被随意修改。

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';

class Index extends React.Component {
  static childContextTypes={
    themeColor:PropTypes.string
  }

  constructor() {
    super();
    this.state={
      themeColor:'red'
    };
  }

  getChildContext() {
    return {
      themeColor:this.state.themeColor
    };
  }

  render() {
    return (
      <div>
        <Header />
        <Main />
      </div>
    );
  }
}

class Header extends React.Component {
  render() {
    return (
      <div>
        <h2>This is header</h2>
        <Title />
      </div>
    )
  }
}

class Main extends React.Component {
  render() {
    return (
      <div>
        <h2>This is main</h2>
        <Content />
      </div>
    )
  }
}

class Title extends React.Component {
  static contextTypes={
    themeColor: PropTypes.string
  }

  render() {
    return (
      <h1 style={{color:this.context.themeColor}}>这里的标题是红色</h1>
    )
  }
}

class Content extends React.Component {
  render() {
    return (
      <div>
        <h2>这里是内容</h2>
      </div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

export default Index

Redux（一）：优雅地修改共享状态

// 用create-react-app新建一个项目make-redux
// 修改public/index.html
<body>
    <div id="title"></div>
    <div id="content"></div>
</body>

// 删除src/index.js，添加下面的代码
// 应用的状态
const appState={
    title:{
        text:'标题',
        color:'red'
    },
    content:{
        text:'内容',
        color:'blue'
    }
}

// 通过渲染函数把上面状态的数据渲染到页面上
function renderApp(appState) {
    renderTitle(appState.title);
    renderContent(appState.content);
}

function renderTitle(title) {
    const titleDOM=document.getElementById('title');
    titleDOM.innerHTML=title.text;
    titleDOM.style.color=title.color;
}

function renderContent(content) {
    const contentDOM=document.getElementById('content');
    contentDOM.innerHTML=content.text;
    contentDOM.style.color=content.color;
}
// 调用
renderApp(appState);

// 问题：
1.所有对共享状态的操作都是不可预料的。
2.“模块（组件）之间需要共享数据”，和“数据可能被任意修改导致不可预料的结果”之间的矛盾。

// 解决方法：
let appState={
    title:{
        text:'标题',
        color:'red'
    },
    content:{
        text:'内容',
        color:'blue'
    }
}

// 专门负责数据的修改
// 所有对数据的操作必须通过dispatch函数
// 参数action是一个对象，type字段来声明到底想干什么
function dispatch(action) {
    switch(action.type) {
        case 'UPDATE_TITLE_TEXT':
            appState.title.text=action.text;
            break;
        case 'UPDATE_TITLE_COLOR':
            appState.title.color=action.color;
            break;
        default:
            break;
    }   
}

function renderApp(appState) {
    renderTitle(appState.title);
    renderContent(appState.content);
}

function renderTitle(title) {
    const titleDOM=document.getElementById('title');
    titleDOM.innerHTML=title.text;
    titleDOM.style.color=title.color;
}

function renderContent(content) {
    const contentDOM=document.getElementById('content');
    contentDOM.innerHTML=content.text;
    contentDOM.style.color=content.color;
}

// 首次渲染页面
renderApp(appState);

// 修改标题文本
dispatch({
    type:'UPDATE_TITLE_TEXT',
    text:'《Helllo World》'  
});

// 修改标题颜色
dispatch({
    type:'UPDATE_TITLE_COLOR',
    color:'blue'
});

// 把新的数据渲染到页面上
renderApp(appState);

Redux（二）：抽离store和监控数据变化

抽离出store

let appState={
    title:{
        text:'标题',
        color:'red'
    },
    content:{
        text:'内容',
        color:'blue'
    }
};

function stateChanger(state,action) {
    switch(action.type) {
        case 'UPDATE_TITLE_TEXT':
            state.title.text=action.text;
            break;
        case 'UPDATE_TITLE_COLOR':
            state.title.color=action.color;
            break;
        default:
            break;
    }   
};

function createStore(state,stateChanger) {
    const getState=()=>state;
    const dispatch=(action)=>stateChanger(state,action);
    return {
        getState,dispatch
    };
};

function renderApp(appState) {
    renderTitle(appState.title);
    renderContent(appState.content);
};

function renderTitle(title) {
    const titleDOM=document.getElementById('title');
    titleDOM.innerHTML=title.text;
    titleDOM.style.color=title.color;
};

function renderContent(content) {
    const contentDOM=document.getElementById('content');
    contentDOM.innerHTML=content.text;
    contentDOM.style.color=content.color;
};

const store=createStore(appState,stateChanger);

renderApp(store.getState());

store.dispatch({
    type:'UPDATE_TITLE_TEXT',
    text:'《Helllo World》'  
});

store.dispatch({
    type:'UPDATE_TITLE_COLOR',
    color:'blue'
});

renderApp(store.getState());

// 针对每个不同的App，我们可以给createStore传入初始的数据appState，和一个描述数据变化的函数stateChanger，然后生成一个store。需要修改数据的时候通过store.dispatch，需要获取数据的时候通过store.getState。

监控数据变化

let appState={
    title:{
        text:'标题',
        color:'red'
    },
    content:{
        text:'内容',
        color:'blue'
    }
};

function stateChanger(state,action) {
    switch(action.type) {
        case 'UPDATE_TITLE_TEXT':
            state.title.text=action.text;
            break;
        case 'UPDATE_TITLE_COLOR':
            state.title.color=action.color;
            break;
        default:
            break;
    }   
};

function createStore(state,stateChanger) {
    const listeners=[];
    const subscribe=(listener)=>listeners.push(listener);
    const getState=()=>state;
    const dispatch=(action)=>{
        stateChanger(state,action)
        listeners.forEach((listener)=>listener())
    };
    return {
        getState,dispatch,subscribe
    };
};

function renderApp(appState) {
    renderTitle(appState.title);
    renderContent(appState.content);
};

function renderTitle(title) {
    const titleDOM=document.getElementById('title');
    titleDOM.innerHTML=title.text;
    titleDOM.style.color=title.color;
};

function renderContent(content) {
    const contentDOM=document.getElementById('content');
    contentDOM.innerHTML=content.text;
    contentDOM.style.color=content.color;
};

const store=createStore(appState,stateChanger);
store.subscribe(()=>renderApp(store.getState()));

renderApp(store.getState());

store.dispatch({
    type:'UPDATE_TITLE_TEXT',
    text:'《Helllo World》'  
});

store.dispatch({
    type:'UPDATE_TITLE_COLOR',
    color:'blue'
});

Redux（三）：纯函数

// 一个函数的返回结果只依赖于它的参数，并且在执行过程里面没有副作用，我们就把这个函数叫做纯函数。
// 函数的返回结果只依赖于它的参数。

Redux（四）：共享结构的对象提高性能

// 解决性能问题：完整代码
let appState={
    title:{
        text:'标题',
        color:'red'
    },
    content:{
        text:'内容',
        color:'blue'
    }
};

function stateChanger(state,action) {
    switch(action.type) {
        case 'UPDATE_TITLE_TEXT':
            state.title.text=action.text;
            break;
        case 'UPDATE_TITLE_COLOR':
            state.title.color=action.color;
            break;
        default:
            break;
    }   
};

function createStore(state,stateChanger) {
    const listeners=[];
    const subscribe=(listener)=>listeners.push(listener);
    const getState=()=>state;
    const dispatch=(action)=>{
        stateChanger(state,action)
        listeners.forEach((listener)=>listener())
    };
    return {
        getState,dispatch,subscribe
    };
};

function renderApp(newAppState,oldAppState={}) {
    if(newAppState===oldAppState) {
        return;
    }
    console.log('render app...');
    renderTitle(newAppState.title,oldAppState.title);
    renderContent(newAppState.content,oldAppState.content);
};

function renderTitle(newTitle,oldTitle={}) {
    if(newTitle===oldTitle) {
        return;
    }
    console.log('render title...');
    const titleDOM=document.getElementById('title');
    titleDOM.innerHTML=newTitle.text;
    titleDOM.style.color=newTitle.color;
};

function renderContent(newContent,oldContent={}) {
    if(newContent===oldContent) {
        return;
    }
    console.log('render content...');
    const contentDOM=document.getElementById('content');
    contentDOM.innerHTML=newContent.text;
    contentDOM.style.color=newContent.color;
};

const store=createStore(appState,stateChanger);
let oldState=store.getState();
store.subscribe(()=>{
    const newState=store.getState();
    renderApp(newState,oldState);
    oldState=newState;
})

renderApp(store.getState());

store.dispatch({
    type:'UPDATE_TITLE_TEXT',
    text:'《Helllo World》'  
});

store.dispatch({
    type:'UPDATE_TITLE_COLOR',
    color:'blue'
});

共享结构的对象

// 浅拷贝
const obj={a:1,b:2};
const obj2={...obj};

// 覆盖、拓展对象属性
const obj={a:1,b:2};
const obj2={...obj,b:3,c:4};

优化性能

// 修改stateChanger，让它修改数据的时候，并不会直接修改原来的数据state，而是产生上述的共享结构的对象
function stateChanger(state,action) {
    switch(action.type) {
        case 'UPDATE_TITLE_TEXT':
            // 构建新的对象并且返回
            return {
                ...state,
                title:{
                    ...state.title,
                    text:action.text
                }
            }
        case 'UPDATE_TITLE_COLOR':
           // 构建新的对象并且返回
           return {
               ...state,
               title:{
                   ...state.title,
                   color:action.color
               }
           }
        default:
            // 没有修改，返回原来的对象
            return state;
    }   
};

// 因为stateChanger不会修改原来对象，而是返回对象，所以需要修改一下createStore。
function createStore(state,stateChanger) {
    const listeners=[];
    const subscribe=(listener)=>listeners.push(listener);
    const getState=()=>state;
    const dispatch=(action)=>{
        // 覆盖原对象
        state=stateChanger(state,action)
        listeners.forEach((listener)=>listener())
    };
    return {
        getState,dispatch,subscribe
    };
};

Redux（五）：不要问为什么的reducer

// 合并appState和stateChanger
function stateChanger(state,action) {
    if(!state) {
        return {
            title:{
                text:'标题',
                color:'红色'
            },
            content:{
                text:'内容',
                color:'蓝色'
            }
        }
    }
    switch(action.type) {
        case 'UPDATE_TITLE_TEXT':
            return {
                ...state,
                title:{
                    ...state.title,
                    text:action.text
                }
            }
        case 'UPDATE_TITLE_COLOR':
           return {
               ...state,
               title:{
                   ...state.title,
                   color:action.color
               }
           }
        default:
           return state;
    }   
};

Redux（六）：Redux总结

// 定义reducer只能是纯函数，功能是负责初始化state，和根据
// state和action计算具有共享结构的新的state
function reducer(state,action) {
    // 初始化state和switch case
};

// 生成store
const store=createStore(reducer);

// 监听数据变化重新渲染页面
store.subscribe(()=>renderApp(store.getState()));

// 首次渲染页面
renderApp(store.getState());

// 后面可以随意dispatch了，页面自动更新
store.dispatch(...)

React-redux（一）：初始化工程

// 用create-react-app新建一个工程，然后在src/目录下新建三个文件：Header.js、Content.js、ThemeSwitch.js
// 修改Header.js
import React, { Component, PropTypes } from 'react';

class Header extends Component {
  render () {
    return (
      <h1>React.js 小书</h1>
    )
  }
}

export default Header

// 修改ThemeSwitch.js
import React, { Component, PropTypes } from 'react';

class ThemeSwitch extends Component {
  render () {
    return (
      <div>
        <button>Red</button>
        <button>Blue</button>
      </div>
    )
  }
}

export default ThemeSwitch

// 修改Content.js
import React, { Component, PropTypes } from 'react';
import ThemeSwitch from './ThemeSwitch'

class Content extends Component {
  render () {
    return (
      <div>
        <p>React.js 小书内容</p>
        <ThemeSwitch />
      </div>
    )
  }
}

export default Content

// 修改index.js
import React, { Component, PropTypes } from 'react'
import ReactDOM from 'react-dom'
import Header from './Header'
import Content from './Content'
import './index.css'

class Index extends Component {
  render () {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

React-redux（二）：结合context和store

// index.js
import React,{ Component,PropTypes } from 'react';
import ReactDOM from 'react-dom';
import Header from './Header';
import Content from './Content';
import './index.css';

function createStore(reducer) {
    let state=null;
    const listeners=[];
    const subscribe=(listener)=>listeners.push(listener);
    const getState=()=>state;
    const dispatch=(action)=>{
        state=reducer(state,action)
        listeners.forEach((listener)=>listener())
    }
    dispatch({});
    return {
        getState,dispatch,subscribe
    }
}

const themeReducer=(state,action)=>{
    if(!state) {
        return {
            themeColor:'red'
        }
    }
    switch(action.type) {
        case 'CHANGE_COLOR':
            return {
                ...state,themeColor:action.themeColor
            }
        default:
            return state
    }
}

const store=createStore(themeReducer)

class Index extends React.Component {
  static childContextTypes={
      store:PropTypes.object
  }

  getChildContext() {
      return {
          store
      }
  }

  render () {
    return (
      <div>
        <Header />
        <Content />
      </div>
    )
  }
}

ReactDOM.render(
  <Index />,
  document.getElementById('root')
)

// Header.js
import React,{ Component,PropTypes } from 'react';

class Header extends React.Component {
    static contextTypes={
        store:PropTypes.object
    }

    constructor() {
        super();
        this.state={
            themeColor:''
        }
    }

    componentWillMount() {
        this._updateThemeColor()
    }

    _updateThemeColor() {
        const {store}=this.context;
        const state=store.getState();
        this.setState({
            themeColor:state.themeColor
        })
    }

    render() {
        return (
            <h1 style={{color:this.state.themeColor}}>标题</h1>
        )
    }
}

export default Header

// Content.js
import React,{ Component,PropTypes } from 'react';
import ThemeSwitch from './ThemeSwitch';


class Content extends React.Component {
  static contextTypes={
    store:PropTypes.object
  }

  constructor() {
    super();
    this.state={
        themeColor:''
    }
  }

  componentWillMount() {
      this._updateThemeColor()
  }

  _updateThemeColor() {
      const { store }=this.context;
      const state=store.getState();
      this.setState({ themeColor: state.themeColor })
  }

  render() {
    return (
      <div>
        <p style={{color:this.state.themeColor}}>内容</p>
        <ThemeSwitch />
      </div>
    )
  }
}

export default Content