react最新笔记
近日学习react 17.0.2版本的笔记，不多讲了上教程加代码
新建项目
- npm install -g create-react-app 全局安装
- create-react-app my-app 新建并对react项目进行命名（注:项目名称不能有大写）
- cd my-app
- num run start
PS：以上是webpack创建react项目方式 本人也只用过webpack其他方式暂时先不做。
关于React
英文官网: https://reactjs.org/
中文官网: https://react.docschina.org/
其优点
1.声明式编码
2.组件化编码
3.React Native 编写原生应用
4.高效（优秀的Diffing算法）
还是不讲废话了 直接来开始react的使用
React JSX
学习react的时候这个是必看的
-
JSX全称: JavaScript XML
-
react定义的一种类似于XML的JS扩展语法: JS + XML本质是
React.createElement方法的语法糖
-
作用: 用来简化创建虚拟DOM
-
写法：var ele =
Hello JSX!
注意1：它不是字符串, 也不是HTML/XML标签
注意2：它最终产生的就是一个JS对象
-
标签名任意: HTML标签或其它标签
-
标签属性任意: HTML标签属性或其它
-
基本语法规则
遇到 <开头的代码, 以标签的语法解析: html同名标签转换为html同名元素, 其它标签需要特别解析
遇到以 { 开头的代码，以JS语法解析: 标签中的js表达式必须用{ }包含 -
babel.js的作用
浏览器不能直接解析JSX代码, 需要babel转译为纯JS的代码才能运行
只要用了JSX，都要加上type=“text/babel”, 声明需要babel来处理
React面向组件编程
注意点
-
组件名必须首字母大写
-
虚拟DOM元素只能有一个根元素
-
虚拟DOM元素必须有结束标签
组件三大核心属性1: state
import React,{Component} from "react";
export default class StateTest extends Component{
constructor(props){
super(props)
this.state={
my:'5555'
}
}
render(){
const abc = this.state //state的
console.log(abc); //{'my:5555'}
return(
<div>我是state组件</div>
)
}
}
来看一下输出结果
对于state的理解
state是组件对象最重要的属性, 值是对象(可以包含多个key-value的组合)
组件被称为"状态机", 通过更新组件的state来更新对应的页面显示(重新渲染组件)
注意:组件中render方法中的this为组件实例对象
组件自定义的方法中this为undefined，如何解决？
- 强制绑定this: 通过函数对象的bind()
- 箭头函数
状态数据，不能直接修改或更新
组件三大核心属性2: props
import React,{Component} from "react";
export default class Props extends Component{
constructor(props){
super(props)
console.log(props)
}
render(){
return(
<div>
真的挺牛逼的
</div>
)
}
}
组件三大核心属性3: refs与事件处理
- 字符串形式的ref
<input ref="input1"/>
- 回调形式的ref
<input ref={(c)=>{this.input1 = c}}
- createRef创建ref容器
import React, { Component } from "react";
export default class InputRef extends Component {
constructor(props) {
super(props)
this.inputdiv = React.createRef()
}
getvalue() {
console.log(this.inputdiv.current.value) //能获取input中的值
}
render() {
return (
<form>
<input type='text' ref={this.inputdiv}></input>
<button onClick={() => this.getvalue()}>获取</button>
</form>
)
}
}
-
事件处理
- 通过onXxx属性指定事件处理函数(注意大小写)
- React使用的是自定义(合成)事件, 而不是使用的原生DOM事件
- React中的事件是通过事件委托方式处理的(委托给组件最外层的元素)
- 通过event.target得到发生事件的DOM元素对象
import React, { Component } from "react";
export default class Ref extends Component{
constructor(props){
super(props)
this.mydiv = React.createRef()
this.inputidv = React.createRef()
}
componentDidMount(){
console.log(this.mydiv.current)
}
render(){
return(
<div ref={this.mydiv}>
995
</div>
)
}
}
this.my.current能获取Dom
简单来做个小案例
- 父子组件之间的通信
首先是父传子之间的案例
父组件
// app.js
import React, { Component } from "react";
import News from './test';
export default class News extends React.Component {
render() {
return (
<News id='gcy' /> //id是传递的参数名 gcy是参数值
)
}
}
子组件 可以使用this.props接受父组件的传参
// index.jsx
import React, { Component } from "react";
export default class News extends Component {
console.log(this.props.id) //输出结果为gcy
render() {
return (
<div>News
<span>{this.props.id}</span>
</div>
)
}
}
来看看界面
子传父的案例
子组件 通过使用this.props.自己的事件名(‘参数’)
import React from 'react'
export default class Test extends React.Component {
constructor(props) {
super(props)
this.state = {
message: '你好啊'
}
}
dianji = () => {
this.setState({
message: '好的吧'
})
}
sends = () => {
this.props.OnMy('masssss'); // 注意这里通过this.props发送
}
render() {
return (
<div>
<p onClick={this.dianji.bind(this)}>{this.state.message}</p>
<h5 onClick={this.sends.bind(this)}>子传父</h5> //这里是子传父的事件
</div>
)
}
}
父组件
import React, { Component } from "react";
import Test from './test/index2'
export default class App extends React.Component {
my =(data)=>{
console.log(data) // 这里的data就是接收的值了
}
render() {
return (
<Test OnMy={this.my} /> //通过OnMy接收
)
}
}
看下输出结果
我来出一个比较连贯的题目，一个父组件和两个子组件，子组件1传递参数名id过去，id的值为1，父组件接收后再通过点击事件传递给子组件2，这里就不贴代码了，新手可以尝试下，做不出来可以私信我要代码或者思路。
- form表单,input以及textarea案例
from表单以及input
import React, { Component } from "react";
import './from.css'
export default class From extends Component {
constructor(props) {
super(props);
this.state = { value: '', value2: '' };
this.handleSubmit = this.handleSubmit.bind(this); //this指向问题
this.handleChangetewo = this.handleChangetewo.bind(this) //this指向问题
}
handleChange(event) {
this.setState({ value: event.target.value }); //event为Input中的值
}
handleChangetewo(event) {
this.setState({ value2: event.target.value }) //event为Input中的值
}
handleSubmit(event) {
alert('提交的名字: ' + this.state.value + '密码是' + this.state.value2);
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit}> //提交的点击事件
<label>
名字:
<textarea type="text" value={this.state.value} onChange={this.handleChange.bind(this)} />
密码:
<input type='password' value={this.state.value2} onChange={this.handleChangetewo} />
</label>
<input type="submit" value="提交" />
</form>
);
}
}
来看一下alert的结果
- select案例
import React, { Component } from "react";
export default class Select extends Component {
constructor(props) {
super(props)
this.state = {
data: [
'213', '555', '214', '你', '西瓜'
],
value: '213'
}
}
changevalue(event) {
this.setState({ value: event.target.value }) //value值为设置的值
}
handleSubmit(event) {
alert(this.state.value)
event.preventDefault();
}
render() {
return (
<form onSubmit={this.handleSubmit.bind(this)}>
<select value={this.state.data.value} onChange={this.changevalue.bind(this)}>
{
this.state.data.map((item, index) => {
return <option key={index}>{item}</option>
})
}
</select>
<input type="submit" value="提交" />
</form>
)
}
}
来看一下alert结果
明日继续更新react-router-dom