react知识点总结

1. 什么是React

React 特点

1.声明式设计 −React采用声明范式，可以轻松描述应用。

2.高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但我们建议使用它。

5.组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。

react的基本使用

1. 新建挂载点

<div id="root"></div>

2. React的引用

<script src="./node_modules/react/umd/react.development.js"></script>
    <script src="./node_modules/react-dom/umd/react-dom.development.js"></script>

3. 创建元素渲染到页面
   

React脚手架

使用React脚手架初始化项目

1.使用React脚手架初始化项目

npx create-react-app my-pro

2.运行命令

 npm start

脚手架中使用React

1. 导入react和react-dom两个包

import React from 'react';
import ReactDOM from 'react-dom';

2. 创建元素

let h1 = React.createElement('h1',null,'我是标题题目')    ///创建元素

3. 渲染到页面

ReactDOM.render(
  h1,document.getElementById('root')
  // ul,document.getElementById('root')
  // <Hello />,document.getElementById('root')
);

JSX的使用

JSX的概述：
JSX是一种JavaScript的语法扩展，运用于React架构中，其格式比较像是模版语言，但事实上完全是在JavaScript内部实现的。元素是构成React应用的最小单位，JSX就是用来声明React当中的元素，React使用JSX来描述用户界面。
JSX的使用步骤：

1. JSX创建react语法

let h1 = <h1>JSX创建的元素</h1>   //使用JSX语法创建react元素

2. 使用ReactDOM渲染元素

ReactDOM.render(
  h1,document.getElementById('root')
  // ul,document.getElementById('root')
  // <Hello />,document.getElementById('root')
);

嵌入JS表达式

let content = '插入的内容'
let h1=<h1>JSX创建的元素+{content}</h1>

列表渲染

• 如果需要渲染一组数据，我们应该使用数组的 map () 方法
• 注意：渲染列表的时候需要添加key属性，key属性的值要保证唯一
• 原则：map()遍历谁，就给谁添加key属性
• 注意：尽量避免使用索引号作为key

let arr=[{id:1,name:'李白'},{id:2,name:'王维'},{id:3,name:'张三'}]  //数据信息
let ul=(<ul>{arr.map(item=><li className='container' key={item.id} >{item.name}</li>)}</ul>) //样式

ReactDOM.render(
  // h1,document.getElementById('root')
  ul,document.getElementById('root')
  // <Hello />,document.getElementById('root')
);

样式处理

let ul=(<ul>{arr.map(item=><li className='container' key={item.id} style={{'color': 'red',"backgroundColor": 'pink'}}>{item.name}</li>)}</ul>) //样式

类名 -className

创建CSS文件编写样式代码

.container {
    text-align: center
}

组件的创建方式

函数创建组件

编写函数组件

function Hello() {
    return (
        <div>这是第一个函数组件</div>
    )
}

利用ReactDOM.render渲染

ReactDOM.render(<Hello />,document.getElementById('root'))

类组件

实例

class Hello extends React.Component{
    render(){
        return (
            <div>这是第一个类组件</div>
        )
    }
}

ReactDOM.render(<Hello />,document.getElementById('root'))

单独的JS文件

./js/Hello.js

export default class extends React.Component{
    render (){
        return(<div>提出来的Hello组件</div>)
    }
}

index.js

import Hello from './js/Hello'
ReactDOM.render(<Hello />,document.getElementById('root'))

React事件处理

事件绑定

1. React事件绑定语法与DOM事件语法相似
2. on+事件名称=事件处理函数，比如 onClick = function(){}
3. React事件采用驼峰命名法

export default class extends React.Component {
    clickHandle(e){
        // console.log('点击')
        console.log(e.nativeEvent) //事件对象
    }
    render(){
        return (<div><button onClick={this.clickHandle}>点击事件</button></div>)
    }
}

有状态组件和无状态组件

1. 函数组件又叫做 无状态组件，类组件又叫做 有状态组件
2. 状态(state) 即数据
3. 函数组件没有自己的状态，只负责数据展示

state基本使用

export default class extends React.Component {
    constructor(){
        super()
        this.state={
            count:0
        }
    }
    state={count:1}
    render(){
        return(
        <div>
            <div>计算器：{this.state.count}</div>
        </div>
        )
    }
}

setState() 修改状态

1. 修改state里面的值我们需要通过 this.setState() 来进行修改
2. React底层会有监听，调用了setState导致了数据的变化，就会重新调用一次render方法，重新渲染当前组件

事件绑定this指向

export default class extends React.Component {
    constructor(){
        super()
        this.state={
            count:0
        }
    }
    state={count:1}
    onInCrement=()=>{
        console.log('事件处理程序中的this：',this)
        this.setState({count:this.state.count+1})
    }
    render(){
        return(
        <div>
            <div>计算器：{this.state.count}</div>
            {/* <button onClick={()=>{this.setState({count:this.state.count+1})}}>+1</button> */}
            <button onClick={()=>this.onInCrement()}>+1</button>
        </div>
        )
    }
}