快来退出咱们吧！
"小和山的菜鸟们"，为前端开发者提供技术相干资讯以及系列根底文章。为更好的用户体验，请您移至咱们官网小和山的菜鸟们 ( https://xhs-rookies.com/ ) 进行学习，及时获取最新文章。
"Code tailor" ，如果您对咱们文章感兴趣、或是想提一些倡议，微信关注 “小和山的菜鸟们” 公众号，与咱们取的分割，您也能够在微信上观看咱们的文章。每一个倡议或是同意都是对咱们极大的激励！
实战案例(二)：留言性能改良
学到这里，咱们把下面案例给批改一下，不要通过原始的 html 加 CDN 的办法引入 React，咱们来采纳 React 给咱们提供的脚手架来改写一下上次的内容。
创立一个空的 react 我的项目
首先咱们应用 react 官网提供的脚手架来创立一个工程
npm create react-app appname留神： 在创立工程的时候兴许会呈现卡住的状况，请保障网络晦涩的状态下创立。
组件化开发
咱们先将之前的 html 中的输入框和展现框形象成为组件。
InputCompoent 输入框组件
该输入框组件须要预留一个办法，将输出的内容传输到父组件中，因而咱们须要预留一个名为 sendSubmit 的办法，从内部传入，并通过回调的办法进行父子组件通信。
import React, { Component } from 'react'import './InputComponent.css'export default class InputCompoent extends Component { constructor() { super() this.state = { inputMess: '', } } render() { return ( <div className="sendEvaluate"> <img className="headImg" src="https://xhs-rookies.com/img/rookie-icon.png" alt="" /> <div className="inputBox"> <textarea className="inputText" placeholder="请输出评论..." value={this.state.inputMess} onChange={(e) => this.getEvaluate(e)} /> <div className="sendSubmit" onClick={() => this.sendSubmit()}> 发表 </div> </div> </div> ) } // 获取输出内容 getEvaluate(e) { this.setState({ inputMess: e.target.value, }) } // 点击执行提交 sendSubmit() { this.props.sendSubmit(this.state.inputMess) // 清空输入框内容 this.setState({ inputMess: '', }) }}EvaluateCompoent 列表展现组件
咱们只须要给EvaluateCompoent组件传输一个名为evaluateList的属性列表，返回给咱们这些评论的内容。
import React, { Component } from 'react'import './EvaluateCompoent.css'export class EvaluateCompoent extends Component { render() { return ( <div className="evaluateBox"> <div className="titleText">大伙的评论</div> {/* 接管留言列表参数并遍历展现 */} {this.props.evaluateList.map((item) => { return ( <div className="evaluateItem"> <img className="headImg" src={item.imgUrl} alt="" /> <div className="senderProfile"> <div className="nickNameBox"> <div className="nickName">{item.nickName}</div> <div className="sendTime">{item.sendTime}</div> </div> <div className="evaluate">{item.evaluate}</div> </div> </div> ) })} </div> ) }}export default EvaluateCompoent组合该两个组件并展现进去
咱们批改App.js并将内容组合起来。
咱们将回调获得的内容搁置于主页面的state中，并将该state中的内容传输给EvaluateCompoent展现组件进行展现。
import React, { PureComponent } from 'react'import EvaluateCompoent from './components/EvaluateCompoent/EvaluateCompoent'import InputCompoent from './components/InputComponents/InputCompoent'import './App.css'export class App extends PureComponent { constructor(props) { super(props) this.state = { evaluateList: [ { imgUrl: 'https://xhs-rookies.com/img/rookie-icon.png', nickName: '菜鸟一号', sendTime: '2021.05.14', evaluate: '这是一个行将推出系列文章的团队，咱们一起期待他们的作品吧！', }, ], message: '你晓得有这么一个团队吗？他们怀揣幻想，艰苦奋斗，作为一群大学生菜鸟，放弃了平时娱乐的工夫，抉择一起学习，一起成长，将平时学习的笔记，心得总结为文章，目标很简略，心愿能够帮忙向他们一样的菜鸟们？你想理解更多吗？快搜寻微信公众号：小和山的菜鸟们，退出他们吧！', } } render() { return ( <div className="root"> <div className="title">Hello React</div> <p className="content">{this.state.message}</p> <EvaluateCompoent evaluateList={this.state.evaluateList} /> <InputCompoent sendSubmit={(e) => this.sendSubmit(e)} /> </div> ) } sendSubmit(e) { let data = { imgUrl: 'https://xhs-rookies.com/img/rookie-icon.png', nickName: '菜鸟一号', sendTime: '2021.05.14', evaluate: e, } this.setState({ evaluateList: [data, ...this.state.evaluateList], }) }}export default App源码地址
我的项目 github 地址
间接预览
咱们倡议采纳 codesanbox 的模式能够在线快速访问以后实战案例。
CodeSandBox
下节预报
本节咱们使用了 React 脚手架、组件化的思维重写了之前的留言板实战案例，在下一个章节咱们将持续学习 React 中组件化通信的内容，敬请期待！