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>


状态

类组件

在这里插入代码片import React,  Component  from 'react'

export default class Hello extends Component 
  state = 
    count: 0
  
  render() 
    const  count  = this.state
    change = () => 
      // ! React 中类组件的状态的更改必须使用 setState
      // ! 1 第一种写法 同步
      this.setState( count: ++this.state.count )
      // ! 2 第二种写法 异步 回调函数 不用加 this
      // ! 这里的形参就是 state 用 count 解构赋值
      this.setState(( count ) => 
        return  count: ++count 
      )
      // ! 需求: 网站标题跟随你的 count 的值发生变化
      // ! 因为传进来的 count 永远都是旧值,所以用setState的第二个回调
      this.setState((count) => 
        // document.title = count
        return 
          count: ++count
        
      , () => 
        //! 能够得到最新值,放到这里
        document.title = this.state.count
      )
    
    return (
      <div>
        <button onClick=this.change> + </button>
        <p>count</p>
      </div>
    )
  


问题

  1. setState 几个参数? 分别是什么作用?
    2个参数
    第一个参数是用于修改 state 的,可以是对象也可以是一个回调函数
    第二个参数使用于获取最新的 state,它是一个回调函数
  2. setState 是同步还是异步的
    第一个参数是一个对象 - 同步
    第一个参数是一个回调函数 - 异步

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

React 学习 Day 01

P07:组件外层包裹原则Fragment 标签的应用

[DAY-01]React

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

react好租客项目Day01-项目演示&项目搭建

Java历程-初学篇 Day01初识java