react基础笔记（1）

react 创建
1. npm i react react-dom
2.引用到需要使用的页面

二.创建react 元素
React.createElement('h1',null,'hello react')
参数一：元素名称
参数二：元素属性
参数N :元素的子节点
3.渲染react元素
ReactDOM.render(title,document.getElementById('root'))
参数一：要渲染的React元素
参数二：挂载点

React脚手架
1.初始化项目
npx create-react-app myappName
2.启动项目
npm start
(脚手架中自动安装react、react-dom依赖包 
import React from 'react'
import ReactDOM from 'react-dom'
使用ES6中的语法导入
)
3.React.createElement创建
ReactDOM.render渲染

JSX
1.React元素属性命名使用驼峰命名法
2.特殊属性名：class-->className for-->htmlFor,tabindex-->tabIndex
3.使用小括号包裹JSX
const div=(<div>1</div>)
3.嵌入式表达
const div=(<div>{name}</div>)
4.条件渲染
const loadData=()=>{
if(true){
return <div>{name}</div>
}else{
 reture <div>load</div>
}
5.列表渲染
使用map函数
注意：渲染列表时应该添加key属性 保证唯一
原则： map()便利谁，就给谁添加key属性
注意：尽量避免使用索引号作为key
 

React组件
1.函数组件
函数组件：使用JS的函数（或箭头函数）创建的组件
约定一：函数的名称必须以大写字母开头
约定二：函数组件必须有返回值，表示该组件的结构
如果返回值为null 表示不渲染任何内容

const Hellow=() =>{
<div></div>
}
or
function Hellow()=>{
reture <div></div>
}
ReactDom.render(<Hellow/>,root)

2.类组件
类组件：使用ES6的class创建的组件
约定1：类名称必须大写
约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法或属性
约定3：类组件必须提供Render()方法
约定4：render()方法必须有返回值，表示该组件的结构

class Hellow extends React.Component{
render(){
return <div></div>
}
}
ReactDOM.render(<Hellow/>,root>

React事件处理
React事件绑定语法与DOM事件语法相似
语法 on+事件名称=｛事件处理程序｝，比如onClick=｛（）=>｛｝｝
注意：React 事件采用了驼峰命名法，比如：onMouseEnter、onFocus

function handleclike（e){
e.preventDefault()//阻止事件的默认处理
｝

有状态组件和无状态组件
函数组件又叫无状态组件，类组件又叫有状态组件
状态（state)即数据
函数组件没有自己的状态，只负责数据展示（静）
类组件有自己的状态，负责更新UI，让页面“动"起来

组件中的state 和 setState
1.state的基本使用
state 是组件内部的私有数据，只能在组件内部使用
state的值是对象，表示一个组件可以有多个数据
 获取状态: this.state
eg:

constructor(){
super() //es6中构造函数的语法
this.state={
count:0
}
reder(){
reture{
<div>
<h1>{this.state.count}</h1>
</div>
}
}
}

2.setState()修改状态
setState的作用：1.修改state 2，更新Ui
思想 数据驱动视图
 

constructor(){
super() //es6中构造函数的语法
this.state={
count:0
}
reder(){
reture{
<div>
<h1>{this.state.count}</h1>
<buttom onClick={()=>{
this.setstate{
count:this.state.count+1
}}}>+1</buttom>
</div>
}
}
}

事件绑定的this指向问题
1.箭头函数 
利用箭头函数本身不绑定this的特点
2,Fubction.prototype.bind()
利用ES5中bind方法，将事件处理程序中的this与组件实例绑定到一起
3，class实例方法
利用箭头函数形式的class实例方法
将方法改为箭头函数

表单处理
1，受控组件
html中的表单元素是可输入的，也就是有自己的可变状态
而react中可变状态通常保存在state中，并且只能通过setState()方法来改变
react将state与表单元素值value绑定到一起，由state的值来控制表单元素的值
受控组件：其值受到react控制的表单元素
eg:

//文本框
<input type="text" value={this.state.txt} onChange={this.handlechange} />
//富文本框
<input type="text" value={this.state.txt} onChange={this.handlechange} />
//下拉框框
<select value={this.state.city} onChange={this.handlechange} >
<option value='sh'>上海</option>
<option value='sh'>上海</option>
</select>
//复选框
<input type="checkbox" checked={this.state.txt} onChange={this.handlechange} />

2非受控组件
使用步骤：
1.调用React.createRef()方法创建一个ref对象
construtor(){
super()
this.txtRef=react.createRef()
}
2将创建好的ref对象添加到文本框中
<input type="text" ref={this.textRef}/>
3通过ref对像获取文本框的值
console.log(this.txtRef.current.value)
}