使用React写一个网站的心得体会

网站是毕业设计的作品，开发这个网站的目的主要用于记录一些笔记，以及聚合一些资讯信息，也算自己在网络世界中的一块静地吧，可以在这里一些技术上想法的实践。

网站最初前端使用 vue 开发，在前段时间由于项目的开发进度已经不是那么紧急，有了一些空闲时间。而对没有使用过 React 又一直耿耿于怀，索性就使用 React 进行了一次前端的重构。

学习一门新的技术最基本的当然就是阅读相关文档了，作为一个单页面应用前端路由当然是不可能少了，而使用 React 如果不使用 Reduce 那又感觉发挥不其作用(虽然他们其实也没什么必须的关系)。所以在这里使用了 react ， react-router ， react-redux ，以下为在使用 React 开发中的一些见闻，有幸被你看到该文，如有不对之处，还望指出，如果你不小心被带入坑，本人概不负责。

首先就是阅读 React 的文档了，文档使用大量举例的形式介绍如何使用 React 进行开发，如如何设计 state ， props ，如何组件间通信，如何设计组件等。文档虽然进行了详细的介绍，但是往往还是需要真正的实践才能发现其中的妙处。如 state ， props 的设计，在一个 X 组件中拥有 Y ， Z 两个组件，假设 Y 组件拥有一个输入框，而 Z 组件可能需要用到 Y 组件输入的值做出一定的变化，当然如果把他们写到一起也不是不可以的，但是考虑到组件复用，功能单一等因素还是拆开比较合理，那么这个值到底应该哪个组件来储存呢？如下两个组件分别为 Y ， X ，这样设计明显是不符合 state 设计的，拥有太多冗余部分。

class InputComponent extends Component {
  constructor () {
    super()this.state = {
      value: ''}
  }
  valInput (e) {
    let value =  e.target.valuethis.setState({value})this.props.inputChange(value)
  }
  render () {return <input onChange={this.valInput.bind(this)}/>  }
} 

查看更多关于使用React写一个网站的心得体会的详细内容...