react初始

一、一些基础概念

1、框架：基于整个项目的

2、库：在某个模块中单独使用，轻量级的

在vue中，DOM的操作时DOM指令调用js

在react中，所有的DOM 渲染都是由JS完成的

组件基于视图

模块基于代码

当前类的函数都是当前类的原型函数

 

类的原型函数可以访问类的公有属性 state

state 和proper都是对象、类的公有属性

{this.state.showType=='login'?<Login />:<Register/>}

 

二、react脚手架的安装方式

1、安装脚手架环境(在超级管理员权限下)

sudo npm install -g create-react-app

2、路径改变到桌面

cd Desktop

3、在桌面文件下创建项目(在超级管理员权限下)

sudo create-react-app my-app

4、将路径切换到创建的当前文件夹下

cd my-app/

5、运行项目

npm start

 

 

三、 ReactDOM.render()方法

要将React元素渲染到根DOM节点中，我们通过把它们都传递给 ReactDOM.render() 的方法来将其渲染到页面上

ReactDOM.render有2个参数，第一个为即将要渲染的新的DOM元素

第二个为新节点的父级标签(js原生的节点对象)

ReactDOM.render(

<h1>hello world</h1>,

root

);

也可以创建一个 React.Component 的 ES6 类，该类封装了要展示的元素（return的作用是将要展示的内容返回出去）

四、react渲染方式

React将所有的基于React的DOM渲染都封装在了JS中；

* （1）直接在ReactDOM.render()函数的第一个参数的位置写DOM

* （2）用一个函数(首字母大写)封装，再调用(单标签)

* （3）用类封装，这个类要继承React的Component类，之后直接调用(并没有从类中实例化对象，要关注this的指向)

五、JSX语法

<!--可以在JSX语法中用{}包裹js表达式-->

JSX 用来声明 React 当中的元素

在 JSX 中使用表达式

你可以任意地在 JSX 当中使用 JavaScript 表达式，在 JSX 当中的表达式要包含在大括号里。

六、props、state

props将外界的参数传给当前类从其父类继承到的某个函数中

//可以在调用组件时向组件传多个参数，但是这些参数都是以键值对的形式在props中被接收

//当前组件使用的所有的变量，在函数中用this.state的方式访问

this.state={

name:"rose",

age:18,

sex:"男"

}

react提供的setState函数，通过这个函数更改state的状态值，这个更改就可以动态的渲染到DOM节点上

this.setState对state中的数据进行更改

this.setState({

showType:type

})

七、钩子函数

componentDidMount

这是一个生命周期中的钩子函数，也是这个类的一个原型函数，可以在这个函数中访问这个类的原型函数和公有属性(state和props都是公有属性)

//在第一次渲染后调用(挂载后)

八、传参方法

在事件中调用函数时传参

{/*传参方式1*/}

点击事件触发时，调用函数fn1的bind方法，可以传递多个参数，在函数fn1中接收，事件对象e不需要传递

但是需要在函数中接收

<button onClick={this.fn1.bind(this,4,6)}>点击</button>

fn1(num1,num2,e){

console.log(num1,num2,e)

}

{/*传参方式2*/}

箭头函数的形式，事件对象为最后一个参数

<button onClick={ (e) => this.fn1(11,22,33, e)}>点击</button>

用bind方式

(1)触发事件时调的并不是类的原型函数

(2)调的是类的原型函数调了bind之后的返回值

(3)调返回值时相当于调了这个原型函数

(4)会将这个原型函数中的this替换成bind的第一个参数(一般情况下这个参数都是this)

九、React的条件渲染：

// react没有提供条件渲染指令，得通过分支语句在render函数渲染之前，做判断，调用不同的组件进行渲染

十、表单

用 onChange 事件来监听 input 的变化，并修改 state。

// 当input输入框的值发生改变时触发