react页面都是由组件构成，并且每个组件都有他自己的声明周期以及三大属性：state，props，refs
state是整个组件的数据池，props是组件接收的参数，refs是组件里带有ref属性的元素的集合
1.函数式声明组件
首先构建一个react页面需要引入以下几个库
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<body>
<div id="test4"></div>
<script type="text/babel">
这里用到了jsx的语法，所以需要给script标签的type属性改成babel
//函数形式创建组件
function Person(props) {
这里props接收name，age，sex三个参数，并且渲染到dom中
return (<ul>
<li>{props.name}</li>
<li>{props.age}</li>
<li>{props.sex}</li>
</ul>)
}
</script>
</body>
//渲染组件
通过reactdom.render方法去渲染虚拟dom，第一个参数就是虚拟dom，这里我们直接将组件函数的名字传进去，第二个参数就是通过id去找跟标签
ReactDOM.render(<Person name={p1.name} age={p1.age} sex={p1.sex}/>, document.getElementById('test4'))
函数式的组件只是简单的组件构建方式，当我们需要去构建复杂的组价的时候，就需要用到类的形式去构建了
已类的形式构建组件，我们就可以用到组件里的state属性，基本语法如下
class Input extends React.Component {
constructor(props) {
super(props);
}
render() {
return (
<div>
</div>
)
}
}
ReactDOM.render(<Input/>, document.getElementById('test5'))
接下来去构建一个基本的页面。
这里是基于脚手架的项目中去构建页面
image.png
脚手架搭建的项目已经配置好了改用到的东西，所以只需要直接写我们的组件，然后挂载到app组件中去就行了
关于入口文件的一些注释
image.png
App.js
import './App.css';
import Left from './components/left/left'
import Right from './components/right/right'
import React, {Component} from 'react'
class App extends Component {
constructor(props) {
super(props);
初始化组件对象都在constructor函数中进行。
this.state = {
list: []
}
this.addItem = this.addItem.bind(this)
this.delItem = this.delItem.bind(this)
}
addItem(item) {
let {list} = this.state
list.push(item)
this.setState({list})
}
delItem(index){
console.log(index)
let {list} = this.state
list.splice(index,1)
this.setState({list})
}
render() {
return (
<div className="App">
<h1 className='centers'>请发表对react的看法！</h1>
<div className="center">
<div className="left">
<Left addItem={this.addItem}/> //这里引入左边的组件，并且传一个新增的方法给他
</div>
<div className="right">
<Right list={this.state.list} delItem={this.delItem}/>
//这里引入右边的组件，传一个需要显示的数组和删除的方法
</div>
</div>
</div>
);
}
}
export default App;
左边的组件
import React, {Component} from 'react'
import './index.css'
class Left extends Component {
constructor(props) {
super(props);
this.add = this.add.bind(this)
}
add() {
let param = {
name: this.nameIpnut.value,
msg: this.msgInput.value,
}
this.props.addItem(param)
this.nameIpnut.value = ''
this.msgInput.value = ''
}
render() {
return (
<div>
<div className="l_1">
<div>用户名</div>
<div className="i_div">
<input placeholder='请输入用户名' className="inp" ref={input => this.nameIpnut = input}/>
</div>
</div>
<div className="l_1">
<div>评论内容</div>
<div className="i_div dd">
<textarea placeholder='请输入评论内容' className="inp" ref={input => this.msgInput = input}/>
</div>
</div>
<div className='but' onClick={this.add}>提交</div>
</div>
)
}
}
export default Left
右边的组件
import React, {Component} from 'react'
import './index.css'
class Right extends Component {
constructor(props) {
super(props);
this.delItems = this.delItems.bind(this)
}
delItems(e,index){
this.props.delItem(index)
}
render() {
let {list} = this.props
return (
<div style={{'margin-left': '20px'}}>
<h2>评论回复</h2>
{list.map((item, index) => <div key={index} className='item'>
<div className='dis'>
<div>{item.name}说：</div>
<button className='r' onClick={e => this.delItems(e,index)}>删除</button>
</div>
<div className='msg'>{item.msg}</div>
</div>)}
</div>
)
}
}
export default Right
几个需要注意的点
1.react中，修改state中的属性的值，不可以跟vue一样通过直接赋值来完成。而是需要去调用this.setState({})这个方法去赋值，这一点跟原生小程序的赋值类似
2.react中定义的方法，this默认指向的是undefined。所以我们需要在初始化的时候去给他动态改变this的指向
这里用的是bind方法去改变指向 this.delItems = this.delItems.bind(this)
3.改变this的指向还可以通过箭头函数的形式
之前用的是这种方式，很麻烦，每个方法都要去改变this 的指向
this.delItems = this.delItems.bind(this)
已知箭头函数中的this会默认指向最外层的对象
所以在定义方法的时候写成以下方式就可以了
delItems = () => {
}
4.react中写行内样式需要动态写入，以两个花括号的形式
style={{'margin-left': '20px'}}
最外层的花括号代表写的是js代码，里面一队花括号表示一个对象，对象中包含的样式的键值对
5.react中渲染数组稍微有点麻烦
render() {
let {list} = this.props
return (
<div style={{'margin-left': '20px'}}>
<h2>评论回复</h2>
{list.map((item, index) => <div key={index} className='item'>
<div className='dis'>
<div>{item.name}说：</div>
<button className='r' onClick={e => this.delItems(e,index)}>删除</button>
</div>
<div className='msg'>{item.msg}</div>
</div>)}
</div>
)
}
用一对花括号包裹渲染数组的代码，通过数组的map方法，返回出需要渲染的标签解构
箭头函数()=> 后面不加花括号则默认return 加了花括号则需要手动添加return
{list.map((item, index) => {
return <div key={index} className='item'>
<div className='dis'>
<div>{item.name}说：</div>
<button className='r' onClick={e => this.delItems(e,index)}>删除</button>
</div>
<div className='msg'>{item.msg}</div>
</div>)}}
网友评论