如何使用React写一个网站-创新互联

如何使用React写一个网站?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

网站建设哪家好,找创新互联建站!专注于网页设计、网站建设、微信开发、成都微信小程序、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了乳源免费建站欢迎大家使用!

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

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

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

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

新闻名称:如何使用React写一个网站-创新互联
标题来源:http://pwwzsj.com/article/dehogs.html