重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
如何使用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 } }