React 学习 Day 01

Posted 鲸渔要加油

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React 学习 Day 01相关的知识,希望对你有一定的参考价值。

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>
  1. 定义组件
function Login() {
  return(<div>
    <form>
      <p>
        用户名:
        <input type="text" />
      </p>
      <p>
        密码:
        <input type="text" />
      </p>
      <p>
        <input type="submit" value="登录" />
      </p>
    </form>
  </div>)
}
  1. 渲染(调用组件)
ReactDOM.render(<Login />, document.querySelector('#app'))

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

  1. 定义
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>)
  }
}
  1. 渲染(调用组件)
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>

以上是关于React 学习 Day 01的主要内容,如果未能解决你的问题,请参考以下文章

React 学习 Day 01

中继片段传播不起作用

[DAY-01]React

React基础Day01-React概述&脚手架搭建&JSX&组件

react 对循环warning提示增加key的研究

Python学习笔记-基础Day01