多译 · 更新日志页面开发(一)：初识react

如愿以偿加入了INA技术部的infinite studio，先要经历一段时间的实习期，在此期间要完成mentor分配的miniproject。我的任务是在色老师的产品多译网站上添加一个更新日志的功能。

色老师给我们发了一个React的入门视频，也就是通过这个视频，我第一次认真学习了React，也认真学习了前端开发。

这个视频系列的名字叫做 《React16.4 开发简书项目 从零基础入门到实践》 非常感谢这个作者。

1 回看往事

回看之前的前端开发，大一的时候在鸡腿从0到1，学习了HTML+CSS+JavaScript全家桶，做一个页面往往都是东抄西抄。后来了解到了一些UI框架诸如BootStrap、ElementUI，自己也从来没有去深入了解过其文档，拿着最简单的Demo实现鸡腿要求的功能以后就仅此而已了。后来一段时间学业繁忙，在鸡腿成为部长以后忙于部门各项工作，也不用自己亲历亲为地参与到开发之中。
这门“手艺”彷佛已经丢失。

或许是因为在我内心里，是对前端不以为意的，或者说嗤之以鼻的。

当然人的想法总是会变的。

2 重新审视前端的契机

加入INA以后，色老师分享了一些自己的产品和技术链条，这让我备受震撼。

而简单观看过React的视频及阅读其文档之后，我更是不得不重新审视前端。

因为我发现，我之前干的事情仅仅是一个入门一礼拜前端就应当会干的事情。

3 初识React

这个视频的作者通过一个简书的项目，在实践中教授React的使用方式。看完这些视频之后我对于这个框架有了基本的概念。下面写一下我对于React的认知。

React由Facebook提出，2013年开源，用函数式编程的理念。是目前使用人数最多的前端框架，并且其文档十分建全，并且拥有完善的社区

React Fiber 指React 16以上的版本

结合React官方文档中，React哲学一节

3.1 组件化

React的设计原则就是将一个界面划分为一个个组件，这些组件可能是嵌套的。

你可以将组件当作一种函数或者是对象来考虑，根据单一功能原则来判定组件的范围。

一个组件就是一个类，其render函数返回一个dom标签，用来进行渲染。

组件名首字母必须大写

3.2 props 和 state

props由父组件传入，用以父组件向子组件传输数据

state由组件内部自己维护

props 和 state更新以后，组件都会重新渲染。这也是React的MVVM的体现，或者说React是数据驱动的。
我们想要更新View只需要更新相应的数据（即 props 和 state）.比如一个点击事件，我们不用在点击事件中直接操作dom，而是操作dom绑定的数据

在constructor中设定state，作为this的一个属性

render函数中return里面用{}包围的内容解析为代码，其他的解析为标签或者字符串

state的设定不能用赋值语句，要用setState()，state是只读的。

对于数组state的操作,如下例子中，实现在list state中插入了一个”123“字符串,其中三个点是es6语法的展开运算符。

this.setState({
  list: [...this.state.list, "123"];
})

数组的map方法可以用来渲染列表，map方法参数是一个函数，该函数可以有三个参数分别为 item index array 其中后两个是可选的。map方法返回一个数组，即参数函数返回值够成的数组。

list.map((item)=>{
  return <li>{item}</li>
})

数组的元素删除应当先拷贝一份state，然后操作副本。（注意这个拷贝要用展开表达式，而不能简单用个等于号）

3.3 自底向上的传递方式

从上述props和state的组合方式中可以看出数据是从上到下传递的，并且是单向。
但是我们不得不需要自底向上的数据传递方式。

子组件修改父组件的state： 父组件向子组件传递方法

注意

//in child
handleFatherState("123")

//in father
<Child handleFatherState = {this.props.handleState.bind(this)}/>