React学习总结

JSX

JSX 基本语法

• 注释

{/*I am Annotation */}

• 标签

多行标签需要有一个父元素包裹

• 表达式

如果想在JSX中使用表达式，需要把表达式放到{}中，其次变量也应该放到{}中

• 函数&对象

let user ={

​ name:'Hwk',

​ age:18

}

function fun(obj){

​ Return "name is $(obj.name)"+"......."+"age is $(obj.age)"

}

function fun(obj){

​ Return "name is "+ obj.name+"......."+"age is " + obj.age

}

JSX 高级语法

• 三元/三目运算符

let price = 99;

{price>100?"很贵":"很便宜"}

• 渲染数组

var arr = [

<p>新闻标签</p>
<p>新闻标签</p>
<p>新闻标签</p>
<p>新闻标签</p>
<p>新闻标签</p>

]

let myDom = (<div>
{arr}</div>
)

• 属性设置

let text = "点我去百度";

let linkUrl = "http://www.baidu.com"

let myDom = <a href{linkUrl}>{text}</a>

• style

let modelStyle = {color:"red",backgroundColor:"pink"}

let myDom = <p style={modelStyle}>修改样式</p>

在JSX中不能使用class属性，class是JS关键字，而是使用className

React列表

map()

let arr = ["吃饭",“睡觉”,"打斗"];

let myDom = arr.map((item,index)=>{
// key 必须是独一无二的
return <p key = {index}>{item}</p>

})

for in 循环

let newarr = [];

for(let index in arr){

newarr.push(<p key={index}>{arr[index]}</p>)

}

ReactDom.render(fun(),document.getelementById("demoReact"));

实例

let arr = ["吃饭",“睡觉”,"打斗"];
let index = -1;
let myDom = arr.map((v,i)=>{
// key 必须是独一无二的
return <p key = {i} onClick={()=>{console.log(i);index = i;}} style ={color:i===index?'red':''}>{v}</p>
})

点击事件使用驼峰命名法

遍历对象

var obj = {

​	name:“小明",

​	age:18

}

consoloe.log(obj.name)
console.log(obj["age"])
// . 更方便，但是如果key是一个变量就不能这么取值

Object.keys(obj)返回一个数组类型的数据，且指的是key值

Object.values(obj)返回一个数组类型的数据，且指的是value值

let obj={
	name:“小明",
	age:18,
	sex:"男"
}

Object.key(obj).map(v,i)=>{
return<p>变量的属性是{v}---对应的值为{obj[v]}</p>
}

面向组件编程

高耦合低内聚

高耦合就是把逻辑紧密的内容放到一个组件当中，低内聚把不同组件的依赖关系尽量弱化，每个组件都尽可能独立起来

无状态组件

类组件

class MyCom extends React.Component{
	render(){
		return{
<div>class componenet</div>
		}
	}
}
let com = <MyCom/>

属性 props

props 是react中的一个重要属性，是组件对外的接口，可以从组件的外部往内部传参数

也可以完成父组件给子组件传值

<script type = "text/babel">
function Com(props){
	return(
	<div>The first item is {props.text},and the second item is {props.num}</div>
	)
}
let obj = {
	text = "text",
	num = "num"
}
ReactDOM.render(<Com{...obj}/>,document.getElementById("demoReact"));
</script>

class Com extedns React.Componet{
	render(){
		return{
			<div>
				I am class component{this.props.name}--{this.props.num}
			</div>
		}
	}
}

ReactDOM.render(<Com name="name" num="num"/>,document.getElementById("demoReact"));

props 默认值

Com.defaultProps={

​	name: 'I am default name value'

}

Props.name = props.name || "Default name"

props 验证

引用prop-types库 npm install --save prop-types

Com.propTypes={

​	name: PropTypes.number//验证传递进来的数据必须是number类型

​	num:ProTypes.string

}

状态 state

state是组件对内的接口，对内管理数据的的属性

react中，我们只需要关心的是数据，当数据改变，页面就会自动发生改变

state 可变的

props 只读的

this.setState()是异步

class Com extends React.Component{
	constructor(props){
	// 如果想在construction使用props，一定要在super中写上props
	super(props)
	this.state={
		name:"xixi"
	}
}

​	render(){

​		return{

​		<div>{this.state.name}</div>

​		}			

​	}

}

生命周期

refs转发

react 提供一个ref的数据，不能在无状态组件中使用，因为无状态组件没有实例

表示当前组件的真实实例的引用，他会返回当前属性的元素

1. 字符串的方式：调用方法onClick
2. 回掉函数（推荐）: 就是在dom节点上或者组件上挂载函数
3. React.createRef()：把值赋值给变量，使用ref的current属性来拿到这个节点

事件与this

• bing方式原定绑定
• 函数通过箭头函数进行常见
• constructor中提前绑定
• 把事件调用写成箭头函数的调用的方式

条件渲染

• if语句

• 三元运算符

状态提升

多个组件需要反映相同的变化数据，提升到他们最近的一个父组件中

脚手架

create-react-app是facebook推出的一款react的脚手架

npm install -g create-react-app 全局安装脚手架

create-react-app --version 版本

npm start 启动项目

public

静态文件的存储位置

src

src 写代码的地方

json-server

json-server 模拟数据

npm install json-server -g

axios 数据请求

npm install --save axios

启动 cd mock 文件夹

json-server json数据的名字 --port 4000

跨域请求