对于一直使用angular的我，感觉react和angular之间的编写和思想还是有很多不同的地方，这也是我选择学习react的原因。写这篇文章，也希望通过一些小案例，帮助和我一样的react小白更好的了解它~
react有什么优点
- 生态强大
- 上手简单
- 社区强大
react环境搭建
① 首先进行本地的node安装
② 安装react的脚手架 npm install -g create-react-app
③ 创建我们的第一个实验项目 create-react-app react-demo
创建成功之后，关于项目目录，其实和其他的框架是差不多的， 主要是index.js : 这个就是项目的入口文件，第一次尝试我们可以改改这里的代码~
HelloWorld组件的初尝试
react的组件化开发主要使用的JSX语法，在写helloworld之前，先简单的介绍一下JSX.
- JSX就是Javascript和XML结合的一种格式。React发明了JSX，可以方便的利用HTML语法来创建虚拟DOM，当遇到" < " JSX就当作HTML解析，遇到" { "就当JavaScript解析
jsx中的一些小坑- 在jsx中添加class的时候，react为了和js中的class冲突，所以使用的是“className”
- 在jsx中需要解析html的时候需要使用dangerouslySetInnerHTML 例子："<"li dangerouslySetInnerHTML={{__html:item}}>"
react是组件化编写
import React, {Component} from 'react' // 引入React中必要的文件
class App extends Component{ // App是组件，react中的组件都是大写字母开头
render(){
return (
// return中只能有一个根标签，当不希望渲染额外标签时，可以用<> 或者<React.Fragment>进行包裹
<div>
Hello World
</div>
)
}
}
export default App;
react的进阶实例（响应式设计和数据绑定）
react是不建议直接操纵DOM元素的， 更提倡数据驱动，通过改变数据可以完成页面的更新。
class TodoList extends Component {
constructor(props){
super(props) // 调用父类的构造函数，固定写法
this.state={ // 定义需要使用的到的变量，
inputValue:'' , // input中的值
list:['学习Angular', '学习React'] //列表内容
}
// this指向不对，this默认指向的是组件，而不是调用的地方，你需要重新用bind设置一下指向
// 构造函数中绑定性能会高一些
this.inputChange= this.inputChange.bind(this);
}
// 改变input的输入值
public inputChange(e){
console.log(e.target.value);
// 是React中改变值, 需要使用this.setState方法。
this.setState({
inputValue:e.target.value
})
}
// 添加新的待办事项
public addList(){
this.setState({
list:[...this.state.list,this.state.inputValue]
})
}
// 删除待办事项
public deleteItem(index){
let list = this.state.list // 坑：React是禁止直接操作state的,所以最好要先赋值给一个新的变量，在进行操作
list.splice(index,1)
this.setState({
list:list
})
}
render() {
return (
<>
<input value={this.state.inputValue} onChange={this.inputChange} />
<button onClick={this.addList.bind(this)}> 增加服务 </button> // 也可以在这里进行this的绑定
<ul>
{
this.state.list.map((item,index)=>{
// 用map循环时，需要设置一个不同的key值,这是react的要求
return ( // 如果代码要换行，return后边就需要添加一个圆括号
<li
key={index+item}
onClick={this.deleteItem.bind(this,index)}
>{item}</li>
)
})
}
</ul>
</>
);
}
}
export default TodoList;
react组件的拆分(以及涉及到的父子组件的传值)
拆分上个进阶的demo组件，创建一个子组件 Item
import React, { Component } from 'react';
class Item extends Component {
constructor(props){
super(props)
this.handleClick=this.handleClick.bind(this)
}
render() {
return (
<div onClick={this.handleClick}>{this.props.content}</div> // 通过props来接收父组件传过来的值
);
}
public handleClick(){
// 通过调用父组件通过props传过来的方法，实现子组件向父组件的传值
this.props.deleteItem(this.props.index)
}
}
export default Item;
原本的父组件TodoList
import React, { Component } from 'react';
import Item from './Item'； // 引入拆分出去的子组件
class TodoList extends Component {
constructor(props){
super(props)
this.state={
inputValue:'' ,
list:['学习Angular', '学习React']
}
this.inputChange= this.inputChange.bind(this);
}
// 改变input的输入值
public inputChange(e){
console.log(e.target.value);
this.setState({
inputValue:e.target.value
})
}
// 添加新的待办事项
public addList(){
this.setState({
list:[...this.state.list,this.state.inputValue]
})
}
// 删除待办事项
public deleteItem(index){
let list = this.state.list
list.splice(index,1)
this.setState({
list:list
})
}
render() {
return (
<>
<input value={this.state.inputValue} onChange={this.inputChange} />
<button onClick={this.addList.bind(this)}> 增加服务 </button>
<ul>
{
this.state.list.map((item,index)=>{
return (
<div>
<Item content={item} // 引用子组件,并向子组件中传item的值
key={index+item}
index={index}
deleteItem={this.deleteItem.bind(this)} // 向子组件中传相关的父组件的删除方法
/>
</div>
)
})
}
</ul>
</>
);
}
}
export default TodoList;
父子组件传值的简单总结：
- 父组件传递给子组件： 通过属性props传值，子组件通过this.props来获取
- 子组件传递给父组件：
①：父组件将方法当作一个属性，传递给子组件
②：子组件在组件中调用父组件传递进来的function,并传入相关的参数
react中的单项数据流的介绍：
this.state的值只能在本组件中进行修改，子组件不能进行修改，它是只读属性，防止在父组件中调用多个子组件子组件同事修改this.state。
react的生命周期
终于到了react生命周期的介绍啦，是不是有点期待呢~ react的生命周期还是挺多的，希望我可以介绍清楚哈~
啥是生命周期？？ ==》 就是在某一时刻，可以自动执行的函数啦~
Initialization:初始化阶段,用来定义属性props和state
- 其实constructor是个构造函数，它不能算的上是生命周期虽然他们的性质很相似，但是我们可以把它理解为是react的初始化阶段。
Mounting: 挂在阶段
- componentWillMount : 在组件即将被挂载到页面的时刻执行，可以进行数据的查询，只在页面刷新时执行一次。
- render : 页面state或props变更的时候使用。
- componentDidMount : 组件挂载结束时被执行，只在页面刷新时执行一次。
Updation: 更新阶段
- 与states相关的
- shouldComponentUpdate: 组件更新前执行
- componentWillUpdate: 在组件更新之前，但shouldComponenUpdate之后被执行
- render: 更新的时候执行
- componentDidUpdate在组件更新之后执行，它是组件更新的最后一个环节
- 与props相关的
- componentWillReceiveProps: 接受props的组件才会触发这个生命周期，子组件接收到父组件传递过来的参数，父组件render函数重新被执行，这个生命周期就会被执行。
Unmounting: 销毁阶段
- componentWillUnmount: 组件被删除时执行
总结
初识react,还有很多不足的地方~ 希望大家可以一起学习，一起进步鸭~
网友评论