React 学习 Day 01

Posted 2021-09-17 鲸渔要加油

文章目录

• React 学习
• 一、Reacte
• 二、JSX
• 三、显示数据调用函数
• 四、虚拟 DOM 和 diff 算法
• 五、函数组件
• 六、调动组件传值（props）
• 七、组件状态（State）
• 八、事件this指向
• 九、事件传参问题
• 小总结
• 组件的数据形式
• • props
  • state
  • 组件的事件

React 学习

一、Reacte

什么是 react ：用于构建用户界面的js库（ V => mv* ）

创建元素对像 ：const 元素对象名 = React.createElement( 待创建的标签, 待创建的标签属性对象奥/null, 子内容)

二、JSX

使用 createElement 创建 react 对象非常的麻烦,解决方法就是 JSX
JSX ：每个 JSX 元素都是调用 React.createElement() 语法糖
JSX 是js扩展语法，浏览器不支持，可以通过 babel 库来转换，引入 babel 后要记得 <script type="text/babel">

三、显示数据调用函数

在模板中显示数据调用函数
VUE 中， {{函数名()}} {{计算属性名直接用}}
React 中，{函数名()}

四、虚拟 DOM 和 diff 算法

DOM
真实 DOM html 标签组成的树状结构
虚拟 DOM 用 JS 语法组成的树状结构

diff 算法

1. 用 JS 将真实的 DOM 变成虚拟的 DOM
2. 更新同层比较新旧两个虚拟的 DOM 树差异
3. 把比较的差异挂载到 DOM 树上

五、函数组件

构造函数

1. 引入 react、reactdom、babel type="text/babel"

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
</script>

2. 定义组件

function Login() {
  return(<div>
    <form>
      <p>
        用户名：
        <input type="text" />
      </p>
      <p>
        密码：
        <input type="text" />
      </p>
      <p>
        <input type="submit" value="登录" />
      </p>
    </form>
  </div>)
}

3. 渲染（调用组件）

ReactDOM.render(<Login />, document.querySelector('#app'))

class 组件
定义一个 class 叫 Reg
class 就得继承 React.Component
在 render 方法中，返回(return)注册表单 JSX 语法

2. 定义

class Reg extends React.Component {
  render() {
   return (<div>
     <form>
       <p>
         用户名：
         <input type="text" />
       </p>
       <p>
         密码：
         <input type="text" />
       </p>
       <p>
         <input type="submit" value="登录" />
       </p>
     </form>
   </div>)
  }
}

3. 渲染（调用组件）

ReactDOM.render(<Reg />, document.querySelector('#app'))

六、调动组件传值（props）

调用组件标签上有属性会自动被系统放到 props 中
属性名是 props 对象的键
切记： props 只读不能修改

<script type="text/babel">
	// 函数组件提示
	function ModalOne(props) {
		return (
			// 属性名是props对象的键
			<div>
				<p>状态：{props.status}</p>
				<p>提示：{props.msg}</p>
			</div>)
	}
	// class 组件提示
	// class 必须得继承
	class ModalTwo extends React.Component {
		render() {
			return (
				// 要加 this
				<div>
					<p>状态：{this.props.status}</p>
					<p>提示：{this.props.msg}</p>
				</div>)
		}
	}
	// 渲染		
	ReactDOM.render(<div>
		<ModalOne status="true" msg="远近渔1" />
		<ModalOne status="true" msg="远近渔2" />
	</div>, document.querySelector('#app'))
</script>

什么是组件： 就是将HTML、CSS、JS代码封装起来
组件的好处： 减少代码的冗余，便于后期维护
组件的定义：

Vue
Vue.component()
.vue
React
单库：构造函数、class语法 结合 JSX
框架：.js 里面写单库的语法

组件动态传递参数： props 属性来接受，调用组件时候传递

七、组件状态（State）

概念： react 组件中的状态，相当 vue 组件中的 data 模型数据
函数组件： 无组件状态
类组件： 有组件状态

vue：
声明 data 声明
获取 this.键
更新 this.键=值

react：
声明 constructor 中 this.state = {}
获取 this.state.键
更新 this.setState({键1:值1，...}) 这是异步的
多学一招用的概率较低 this.setState 这个语法是异步的，实战中希望数据更新完毕后弹框
this.setState({键1:值1，...},()=>{alert(1)})

八、事件this指向

例如 setNumFn 函数的 this 指向会报错
基础解决方法就是使用箭头函数

1. 先获取 this.state 的变量
2. 在使用 this.setState 来更新
   setState 会再次触发 render 函数来更新视图

<script type="text/babel">
    class Test extends React.Component {
        constructor(props) {
            super(props)

            this.state = {
                num: 666
            }
        }
        
        setNumFn = () => {
            // 语法： this.setState({}, [callback])
            // 1.获取
            let temp = this.state.num + 1
            // 2.更新
            this.setState({ num: temp })
        }
        
        render() {
            return (
                <div>
                    <h1>{this.state.num}</h1>
                    <button onClick={this.setNumFn}>更新</button>
                </div>)
        }
    }
    
    ReactDOM.render(<Test />, document.querySelector('#app'))
</script>

九、事件传参问题

绑定事件传参加小括号会直接触发事件

<script type="text/babel">
  class Test extends React.Component {
    constructor(props) {
      super(props)

      this.state = {
        num: 666
      }
    }

    click1(num) {
      alert(1)
      console.log(this, num);
    }
    render() {
      return (
        <div>
          // 绑定事件传参加小括号会直接触发事件
          <button onClick={this.click1(666)}>删除1</button>
          // 推荐写法
		  <button onClick={e => this.click1(666, e)}>删除1</button>
          <button onClick={this.click1.bind(this, 999)}>删除1</button>
        </div>)
    }
  }
  ReactDOM.render(<Test />, document.querySelector('#app'))
</script>

this 指向问题
解决1 （不推荐： 定义时候用箭头函数）
解决2 {e => this.函数名(实参1,...实参n, e)}）
解决3 {this.函数名.bind(this, 实参1,...实参n)}

小总结

react 中设置事件： on事件类型={}
方法1： {this.函数名} 定义时要使用箭头函数，否则有this执行问题，切记不能写小括号否则直接运行
方法2： {e => this.函数名(实参1,...实参n, e)} 当需要用事件对象
方法3(推荐)： {this.函数名.bind(this,实参1,...实参n)}

组件的数据形式

状态 state
属性 props

props

• 由内部传入
  不可更改
  只有类组件可以内部
  组件自己定义属性 static 属性名 = {}
• 由外部设置
  父级更改
  函数组件写法，父属性绑定，子props接受，{}使用
  类组件不需要接受加this使用，const{属性名}=this.props

state

state 是组件自身的，和外部无关，只能自己定义，自己更改

类组件state定义形式

<script>
  export default class Hello extends Component {
  	// 状态的定义形式 1
    state = {
      count: 0
    }
    // 状态的定义形式 2 构造函数
    construtor(props) {
    	super(props)
    	this.state = {
    		count: 0
    	}
    }
    render() {
      const { count } = this.state
      return (<div>
        {count}
      </div>)
    }
  }
</script>

函数组件的state定义形式
useState 我们称之为 Hooks

<script>
  import React, { useState } from 'react'
  // useState 我们称之为 Hooks
  export default function Hello() {
    // 格式 const/let [变量名] = useState(初始值)
    const [count] = useState(0)
    return (<div>
      {count}
    </div>)
  }
</script>

组件的事件

• 事件
  • 构成部分
    • 1 事件源
    • 2 事件类型
    • 3 事件处理程序
  • 事件数据部分
    • 参数
      • 实参
      • 形参
    • 事件对象

react 中的事件【 绑定在 JSX 上的 】属于合成事件

react 中的 e(事件对象) 是一个类，但里面的东西和原生的 e 是一样的

react 中事件的传参

• 如果是普通函数，建议使用 bind 来做传参
• 如果是箭头函数，在调用这个箭头函数时，在它的外层包裹一层箭头函数

<button onClick={this.handler}>箭头函数事件</button>
<button onClick={this.handler.bind(this,10)}>普通事件传参</button>
<button onClick={() => { this.handler(10) }}>箭头函数传参</button>