Ede's Blog

Home About Github

React初探：写一个“mou”

mouer-preview

简陋的Web Mou

初步

react?

要用react， 得先了解react

facebook如此形容react

We built React to solve one problem: building large applications with data that changes over time.

关键短语 :

  • building large applications(大型的应用)
  • data that changes over time(数据改变频繁)

表示看不懂，只好在心里默念

  • mou， mou， mou

无视一切，继续前进

mou界面

从mou官网盗图一张:

 mou

所以[布局]应该是

  • StatePanle（上）：状态栏，负责显示状态
  • InputPanel（左）：编辑框，负责用户输入
  • RenderPanel（右）：显示框，负责渲染markdown文档

伪代码如下

<Mou>
  <StatePanel />
  <InputPanel />
  <RenderPanel />
</Mou>

用了大半年的div，html里面可没有<InputPanel>，<RenderPanel>啊？

这就是react的作用之一，无中生有，自定义一个伪html标签，以便以后想用就用，就像用html标签一样简单；具体的做法是：

class Mou extends React.Component {
    render() {
        return (
            <div id="mou-app">
                <StatePanel/>
                <InputPanel/>
                <RenderPanel/>
            </div>
        )
    }
}

class StatePanel extends React.Component {
    render() {
        return (
            <div id="state-panel"></div>
        )
    }
}

class InputPanel extends React.Component {
    render() {
        return (
            <textarea id="input-panel"></textarea>
        )
    }
}

class RenderPanel extends React.Component {
    render() {
        return (
            <div id="render-panel"></div>
        )
    }
}

React.render(<Mou/>, document.getElementById('app'));

我又开始懵逼了：不是说前端js一统天下吗？class，extends又是什么东东？

其实，上面的“语言”可分为两部分：

  1. 新鲜出炉的EcmaScript2015，俗称ES6，最新的javascript标准， 如：
    • class StatePanel extends React.Component；
  2. react专用的模板（jsx)，（web标准可不支持自定义标签，jsx的作用是编写jsx，通过解析，识别伪标签）：
    • render(){return (<div id="render-panel"></div>)}：

css美化一下

css如下:

/*布局Start*/
body {
  width: 984px;
  margin: 0 auto;
  padding: 30px;
}
#mou-app {
  width: 984px;
  height: 665px;
}
#state-panel {
  width: 984px;
  height: 23px;
  border-top: 1px solid #DADADA;
  border-bottom: 1px solid #C0C0C0;
}
#input-panel, #render-panel {
  float: left;
  width: 430px;
  height: 580px;
  padding: 30px;
}
#input-panel {
  border: none;
  border-right: 4px solid #f2f2f2;
}
/*布局End*/
/*样式START*/
body {
  background-color: #F5F5F5;
}
#mou-app {
  border-radius: 5px;
  box-shadow: 0 10px 20px 10px #919191;
  overflow: hidden;
}
#input-panel {   
  outline: none;
  resize: none;
  font-size: 1.1em;
}
#render-panel {
  background-color: white;
  
  overflow: scroll;
}
#state-panel {
  background: linear-gradient(#F5F5F5, #D4D4D4);
  background: -webkit-linear-gradient(#F5F5F5, #D4D4D4);
  color: #021000;
  text-align: center;
}
/*样式END*/

好了，一个没有灵魂的mou界面终于出厂了。

## 实时显示

单单是静态的页面可不行! 得让它动起来! – 当年被忽悠学习javascript的言语

mou最基本的功能有什么？实时显示啊！

class Mou extends React.Component {
	constructor() {
		super();
      	// 定义状态，content为需要显示的markdown
		this.state = {
			content: '',
		}
	}
  	// 当content改变时，更新状态(state)
	handleContentChange = (content) => {
		this.setState({content: content});
	}
	render() {
		return (
			<div id="mou-app">
        <StatePanel/>
				<InputPanel  content={this.state.content} 
          handleContentChange={this.handleContentChange}/>
				<RenderPanel content={this.state.content}/>
			</div>
		)
	}
}
class StatePanel extends React.Component {
	render() {
		return (
			<div id="state-panel"></div>
		)
	}
}
class InputPanel extends React.Component {
	onChange() {
		this.props.handleContentChange(this.refs.input.value);
	}
	render() {
		return (
			<textarea id="input-panel" ref='input' 
          onChange={this.onChange.bind(this)}></textarea>
		)
	}
}
class RenderPanel extends React.Component {
	render() {
		return (
          	// 显示框的内容和content绑定
			<div id="render-panel">{this.props.content}</div>
		)
	}
}

React.render(<Mou/>, document.getElementById('app'));

以上代码的意思是，Mou拥有一份content，当InputPanel的content改变（onChange）时，会相应的更改Mou的content（this.props.handleContentChange），进而修改Mou的state状态，从而触发react框架的默认行为：当state改变时，将触发所有与state绑定的props内容，即RenderPanel中的this.props.content；

此时，在InputPanel输入文字，便能在RenderPanel中同步显示；

### Jquery? 
// 以上内容转换成jquery的写法是：
$('#input-panel').change(function() {
    var value = $(this).value();
    $('#render-panel').text(value);
})

WTF? 只需3句话？那我还用什么React，Jquery搞起！

别急，别急，这么想：当你的页面拥有div1，div2，div3，div4，div5等众多元素时，如

  • 当div1.props1改变时，修改div2.props1
  • 当div2.props2改变时，修改div3.props2
  • 当div4.props3改变时，修改div3.props3和div5.props3
  • 当div1.props4改变时，修改div2~div5的props4

于是你的jquery代码变成了

$('.div1').change(function(){$('.div2')...})
$('.div2').change(function(){$('.div3')...})
$('.div4').change(function(){$('.div3')...$('.div5')...})
$('.div5').change(function(){$('.div2')...$('.div3')...$('.div4')...($('.div5'))})
...

假如还有div6，div7，div8…呢？选择多了，整个人就蒙圈了。可能在change事件中，多选了div6，少选了div8等。

而react的做法是，子div的属性与父div绑定，当子属性（props）变更时，通知父状态（state），然后由react来通知所有与该state绑定的props，并判断是否需要重新渲染。

打个比方是：古时，当匈奴入侵时，当地的县令不需要通知哪个邻县来救火，哪个军营来增兵，而是一发奏折交给朝廷，由朝廷按照之前制定的御敌规章（state与props的绑定关系），来通知对应的单位火速增援；这样一来，既防止被入侵的县令随心所欲调动资源，乱了朝纲（$('错误的div')），也保证处于同一防线的所有单位都能收到通知(react会通知所有与state绑定的props)。

当然，这样做的前提是：奏折得像QQ一样快，还不能过分影响效率；否则，县都被攻陷了，奏折还没有到达朝廷。所幸的是，react的diff算法满足了这一点。

恰如react所描述：react就是用来解决__状态多__，__变更快__的大型app。

We built React to solve one problem: building large applications with data that changes over time.

组件化

然而react还有一个明显优点，当我们想在别的地方重用<Mou>这个markdown编辑器时，需要怎么做？仅需在其他class的render方法里，function render(){return <Mou/>}，信手沾来！这就是react组件化的魅力，无需套用js的其他设计模式，代码已经被完美地封装到了一个伪html标签里。拿来即用，挥之即去！

至此， 我以我简陋的理解， 解析了 :
为什么要用50行react代码， 做5行html+3行jquery代码就可以完成的事， 大概可分为

  • 组件化， 便于重用（也有助于BUG定位）
  • 状态管理， 面对众多状态变更时游刃有余

当然， react提供给我们的不止这些， 比如官网讲述的 virtual dom， data flow，这些，我都是不清楚的（手动滑稽）

其他功能

然而，我只希望应用更拉风一点 。
说好的markdown工具， markdown呢？ markdown呢？我特么的markdown呢？

marked

好吧， 看似拉风的工具， 其实都是建立在巨人的肩膀上的；
所以我很厚脸皮地用到了markdown编译器: marked， 它能够将诸如

# 博主你不要脸

转化为

<h1>博主你真的不要脸</h1>

  • 将
class RenderPanel extends React.Component {
	render() {
		return (
			<div id="render-panel">{this.props.content}</div>
		)
	}
}

更改为:

class RenderPanel extends React.Component {
	markup(str) {
		return {__html: marked(str)}// 调用marked.js的marked方法
	}
	render() {
      	// 通过dangerouslySetInnerHTML，将渲染后的markdown文本赋值给RenderPanel
		return (
			<div id="render-panel" 
          dangerouslySetInnerHTML={this.markup(this.props.content)}></div>
		)
	}
}

注：出于安全考虑，React不允许随便渲染html文档，必须显式调用dangerouslySetInnerHTML

markdown.css

虽不是github 代（tong）码（xing）托（jiao）管（you）平台的忠实粉丝， 没事逛（♂）逛（♂）github的习惯还是有的， 所以比较钟情于github markdown的css样式， 废话不多说， 偷! -> 剽窃地址

  • 添加className
// class RenderPanel
<div id="render-panel"  
dangerouslySetInnerHTML={this.markup(this.props.content)}></div>

更改为：

// class RenderPanel， 添加class样式
<div id="render-panel" className="markdown-body" 
dangerouslySetInnerHTML={this.markup(this.props.content)}></div>

注意，因为class是js的关键字，所以在React jsx模板中，我们只能用className来替代class

同步滚动

至此， 我满怀喜悦地向我们班大神seal同学分享我的成果， 他也满怀喜悦地试了一下，发现不能同步滚动， 然后就没有然后了。T_T

其实实现同步滚动并不复杂，最简单的思路:

虽然InputPanel和RenderPanel两人高度不同，但百分比都是一样的啊（100%），所以滚动的百分比一样即可：

最后的js代码：

class Mou extends React.Component {
	constructor() {
		super();
		// 新增核心资料： scrollRatio，高度系数
		this.state = {
			content: '',
			scrollRatio: 0
		}
	}
	handleContentChange = (content) => {
		this.setState({content: content});
	}
	//
	handleScroll = (scrollRatio) => {
		this.setState({scrollRatio: scrollRatio});
	}

	render() {
		return (
			<div id="mou-app">
				<StatePanel/>
				<InputPanel  content={this.state.content} 
				handleContentChange={this.handleContentChange} 
				handleScroll={this.handleScroll}/>
				<RenderPanel content={this.state.content} 
          		scrollRatio={this.state.scrollRatio}/>
			</div>
		)
	}
}
class StatePanel extends React.Component {
	render() {
		return (
			<div id="state-panel"></div>
		)
	}
}
class InputPanel extends React.Component {
	onChange() {
		this.props.handleContentChange(this.refs.input.value);
	}
	onScroll(event) {
		/* 通过参数event.nativeEvent.target获得真实的html对象， 即<textarea>；
		* 获取InputPanel此时的高度
		*/
		var target = event.nativeEvent.target;
		// 计算高度系数
		var scrollRatio 
        	= target.scrollTop / (target.scrollHeight - target.clientHeight);
		this.props.handleScroll(scrollRatio);
	}
	render() {
		return (
			<textarea id="input-panel" ref='input' 
          	onChange={this.onChange.bind(this)} 
  			onScroll={this.onScroll.bind(this)}></textarea>
		)
	}
} 
class RenderPanel extends React.Component {
	componentDidUpdate() {
		var render = this.refs.render;
		// 对应RenderPanel的高度系数
		render.scrollTop = this.props.scrollRatio * 
          (render.scrollHeight - render.clientHeight);
	}
	markup(str) {
        return {__html: marked(str)}
    }
	render() {
		return (
			<div id="render-panel" ref="render" className="markdown-body"
          		dangerouslySetInnerHTML={this.markup(this.props.content)}>
          </div>
		)
	}
}
React.render(<Mou/>, document.getElementById('app'));

最终的结果

## 尾声

很高兴你能在我的胡言乱语中坚持到了最后，末了，附上珍藏在我小抽屉的一句话，以此共勉：

For me， I don’t want to get a job; I want to get invited to great jobs. I don’t want to go to work; I want to go to work with talented people. And I don’t want to be satisfied with knowing enough to do the work that needed to be done yesterday; I want to know how to do the work that will need to get done tomorrow.

对于我来说，我需要的不是工作，我想要的是被邀请去做一份牛逼的工作。我想要的不只是去干活而已，而是想和一群牛逼的人一起做牛逼的事。我不想仅仅满足于用已有的知识来完成现在的工作，而是希望掌握更多的知识来解决未来将会面对的问题。

其他

  • 吃我一记大Vuejs：看看别人家聪明孩子是怎么用vuejs编写的极简的 Markdown 编辑器
  • 更加友好的markdown编辑器Typora，在mac，window，linux下均有对应的安装包哦~强烈推荐
JS中的闭包