React基础知识时刻保持自己的独立与清醒 1、什么是 component 在 React 中, 得益于 JSX 语法

基础知识

1、component

1、 什么是 component

在 React 中, 得益于 JSX 语法, 所有的页面元素都被转换成了 React 对象。只要你的方法 return 的是一个 React 元素, 小到一个 text, 大到一个 page, 都可以认为是 React 组件。归纳起来一句话：如果一个方法接受一个唯一的属性, 返回一个 React 元素, 那它就是一个 React 组件。也就是说，任何的 UI 元素我们都可以使用组件来返回。这个道理也可以用于理解 React 中一切皆组件这句话。

2、state

2、 什么是 state

React 中的 state 主要作用是组件用于保存、控制及修改组件自己的状态, 它只能在 constructor 中初始化, 我们可以用 state 来完成对行为的控制、数据的更新及界面的渲染, 由于组件不能修改父组件传入的 props, 所以我们需要使用 state 来存储组件自身需要的数据, 它的每次改变都会引发组件的更新。即每次数据的更新都是通过修改 state 属性的值, 然后 ReactJS 内部会监听 state 属性的变化, 一旦发生变化, 就会触发组件的 render 方法来更新 DOM 结构。归纳起来一句话: state 是组件用来存储自身数据的一个对象, 它是可以改变的, 它的每次改变都会引发组件的更新。

3、Props

3、 什么是 Props

当 React 元素为用户自定义组件时, 它会将 JSX 所接收的属性（attributes）以及子组件（children）转换为单个对象传递给组件, 这个对象就被称之为 “props”。 props 是一个从外部传进组件内的参数, 由于 React 具有单向数据流的特性, 所以它的主要作用是从父组件向子组件中传递数据, 它是不可变的, 如果想要改变它, 只能通过外部组件传入新的 props 来重新渲染子组件, 否则子组件的 props 和展示形式不会改变。 props 除了可以传字符串, 数字, 还可以传递对象, 数组甚至是回调函数。归纳起来一句话：props 是一个对象, 可以接受几乎所有类型的属性, 它是组件用来接收父组件传入的参数的, 不允许在该组件内部进行改变, 而只能通过父组件来修改。

4、渲染添加删除

4、 渲染数据添加删除

获取input框内容：vue中可以使用v-model，但是react中不可以需要自己使用onChange去监听值的变化并且setState去赋值

父子组件

5、父组件向子组件通信

React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息

6、子组件向父组件通信

利用回调函数
利用自定义事件机制

7、react中使用prop-types检测props数据类型

//安装
npm install prop-types --save
//引入
import PropTypes from 'prop-types';

8、defaultProps或默认参数

当您在React组件中使用默认参数设置默认属性时，您不会得到proptypes验证，而且您还需要在要使用这些属性的每个类方法中定义这些默认参数。

10、 受控组件与非受控组件的区别

受控组件没有自己的状态，它的 value 值由 props 决定，通过回调函数通知父组件修改状态；而非受控组件自己控制自己的状态，我们要获取它的值只能通过 refs 来获取。

tab切换简单路由跳转

11、React tab切换
示例中有两种方法 复制时请注释其中一种


import React, { Component } from 'react'

import './css/index.css' //引入css样式
// 引入tab切换的页面
import Home from './js/Home'
import Collect from './js/Collect'
import My from './js/My'

export class App extends Component {
 constructor(){
   super()
   this.state={
     footList:[//定义渲染的底部导航
       {id:0,name:'首页'},
       {id:1,name:'收藏'},
       {id:2,name:'我的'}
     ],
     onTab:0//定义初始值  页面显示首页
   }
 }

 changeTab=(id)=>{//点击tab切换 注意this指向
     console.log(id)
     this.setState({
       onTab:id//改变初始值 页面进行切换
     })
 }

 tabFun=(index)=>{//点击tab切换页面 方法二
   return{
     0: <Home></Home>,
     1: <Collect></Collect>,
     2:  <My></My>
   } [index];
  
 }

 render() {
   return (
     <div>
       {/* 渲染tab切换 */}
       <ul className="tabFoot">
         {this.state.footList.map((item,index)=><li key={item.id} className={item.id===this.state.onTab?'active':''} onClick={()=>this.changeTab(item.id)}>{item.name}</li>)}
       </ul>
       
       {/* 点击tab切换页面 方法一： */}
           {this.state.onTab===0 && <Home></Home>}
           {this.state.onTab===1 && <Collect></Collect>}
           {this.state.onTab===2 && <My></My>} 

       {/* 点击tab切换页面 方法二：调用函数进行传参 判断显示页面 */} 
           {this.tabFun(this.state.onTab)}
       
     </div>
   )
 }

}
export default App

12、 路由跳转

路由表的注册使用的是Route 标签，路由使用的是path='/home',其中/home就是我们的路由路劲。component是我们路由跳转需要展示的组件。一般路由组件我们是写在pages目录下的。

//安装 
npm install react-router-dom@5
//引入
import {HashRouter,Route} from 'react-router-dom'

//使用
import React, { Component } from 'react'
import {HashRouter,Route} from 'react-router-dom' //引入路由跳转
// 下面引入创建的路由跳转的页面
import Home from './views/Home'
import Shop from './views/Shop'
import My from './views/My'

export class App extends Component {
  render() {
    return (
      <div>
        {/* 路由跳转 注意1：Route不是Router 注意2：path="/XXX" 不加./ */}
        <HashRouter>
          <Route path="/Home" component={Home}></Route>
          <Route path="/Shop" component={Shop}></Route>
          <Route path="/My" component={My}></Route>
        </HashRouter>
      </div>
    )
  }
}

export default App

React基础知识