标签：入门 Component React state 基础教程 props 组件 isLog

React入门基础教程

React 是什么？

React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件”

React的特点？

1. 虚拟Dom节点
2. 单向数据流
3. 组件开发思维

React的语法特点

	jsx: javascript和xml (htm1）标签混合写法

作用:

1. 在javascript中书写html模板
2. 有且只有一个根节点
3. class要写成className
4. 在{}可以写JavaScript
5. 数组里面可以直接写html标签
6. 注释用{/**/}

React的安装

//在全局安装
npm i -g create-react-app

//创建项目 myreact是你创建的项目名
create-react-app myreact

cd 进入到你的项目

cd myreact

使用npm start打开项目

npm start

当出现这个页面就表示页面创建成功了

React的注意事项

一般采用import的方式引入React，React首字母规定大些，因为jsx会默认使用大写的React

• 会根据尖括号(<)来判断是一个html，根据花括号({)来判断是一个js
• js中的保留字 关键字会进行转化
• class=>className for=>htmlFor react相邻的jsx元素，
• react元素，必须被一个标签包裹 <></>
• style标签 必须是一个对象 style={{}} //{}表示js里面的{}表示是一个对象 注释 要用{}包裹
• dangerouslySetInnerHTML 危险的，解析html用innerHtml的方式把内容塞进元素中

React的模板语法

1.条件渲染

（1）三元运算符
如果isLog为true则显示“欢迎回来”和“红烧肉”如果为假则显示“请登录”

 {this.state.isLog?<p>欢迎回来</p>:<p>请登录</p>}
 {this.state.isLog&&<p>红烧肉</p>}

2.列表渲染

import React, { Component } from 'react'

export default class App extends Component {
  constructor(props){
    super(props)
    this.state={
      list:['vue','react','jquery','js'],
    }
    render() {
	    return (
	      <div>
	          {this.state.list.map(item=><p key={item}>{item}</p>)}
	      </div>
	    )
	  }
  }

浏览器渲染结果为：

3.文本渲染

{2+3}
//浏览器渲染结果：5

//也可以写成：
export default class App extends Component {
  constructor(props){
    super(props)
    this.state={
     msg:"你好 react",
    }
    render() {
	    return (
	      <div>
	          {this.state.msg}
	      </div>
	    )
	  }
  }

3.事件

和普通js事件一致，需要驼峰式写法

onClick={this.sayHi}
onClick={()=>{this.sayHi(参数)
onClick={this.sayHi.bind(this,参数)

示例：

export default class App extends Component {
sayHi=(msg="china")=>{
    alert(msg)
  }
render() {
    return (
	      <div>
	      	//三种不同的写法
	          <button onClick={()=>alert('新年快乐')}>问候</button>
	          <button onClick={()=>{this.sayHi('china')}}>传参</button>
	          <button onClick={this.sayHi.bind(this,'中国人不骗中国人')}>传参2</button>
	      </div>
     )
   }
  }

4.更新状态 setState

• 是父类提供的，用于修改状态,这种更新状态的方式，不会覆盖之前的，只会进行比较把更新的状态进行合并
• this.setState 会刷新页面，如果不用this.setState。直接修改state 会改状态还是页面不会刷新
• 需要改属性的话只能把属性(props)变为状态(state)

this.setState({k:v})
this.setState({k:v},()=>{console.log"执行完毕的回调函数")}
onClick={()=>{this.setState({isLog:!this.state.isLog},()=>{console.log('切换完毕');})}}

代码示例：

export default class App extends Component {
constructor(props){
    super(props)
    this.state={
      isLog:false,
    }
  }
render() {
    return (
	      <div>
	         <button onClick={()=>{
            	this.setState({isLog:!this.state.isLog},()=>{
              console.log('切换完毕');
            })
          }}>切换</button>
	      </div>
     )
   }
  }

React的组件

函数组件

 function App{
   return(
     <div></div>
 )
} 
 export default App

标题函数组件的不足

• 没有状态 新版本有增加
• 没有生命周期的钩子 新版本有增加
• 函数组件中没有this

类组件

• 类组件在渲染时会默认调用render方法
• 类组件内有状态和钩子函数
• 需要继承React.Component
• React.Component 是一个基类，有生命周期，更改状态的方法
• 继承React.Component 之后才算是一个React类。

 import React, { Component } from 'react'
 export default class App2 extends Component {
   render() {
     return (
       <div></div>
     )
   }
 }

React 的数据源(props(外部传入，不可修改) ,state(内部自带，可修改))

• props 会把组件传入的属性or方法放在this上 ---- 取值时：this.props.name
• this.state 状态 ---- 取值时：this.state.name

开发者工具

在 Chrome 或者 Firefox 中安装扩展 React Devtools 可以让你在浏览器开发者工具中查看 React 的组件树。

你还可以在 React DevTools 中检查 React 组件的 state 和 props。
安装 React DevTools 之后，右键点击页面的任何一个元素，然后选择“查看”，这样就能打开浏览器的开发者工具了，并且工具栏最后会多展示一个 React 的选项卡（包含 “⚛️ Components” 和 “⚛️ Profiler”）。你可以使用 “⚛️ Components” 来检查组件树。

标签：入门,Component,React,state,基础教程,props,组件,isLog
来源： https://blog.csdn.net/weixin_48463527/article/details/122220809

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。