react的学习a. 在index需要引入，并且命名的首字母要大写 b. ReactDOM.render渲染的是文件 a

React的学习

第一天

react的安装
按照官网安装
创建的项目，文件是.jsx结尾 a. 在index需要引入，并且命名的首字母要大写 b. ReactDOM.render渲染的是文件 4．两种写法 a. function First() { return (

你好

);

}

export default First; b. 类First继承React.Component类 export default class First extends React.Component { render() { return (

你好react

); } } 4. react state 相当于vue的data,但是用法不同绑定数据的方法 react 添加了一个类构造的函数来初始化状态this.state,类组件应该始终props调用基础构造函数 export default class First extends React.Component { //constructor 是构造函数 constructor(props) { //super是es6的关键字 super可以用在类的继承中，或是对象的字面量中 //super指代了整个prototype或者_proto_指向的对象用在子类constructor函数中 super(props); this.state = { uesrname: '你好漂亮react', }; } render() { return (

//this.state来进行修改 {this.state.uesrname}

); } }

react的事件处理 react元素的事件处理和domy元素类似。但是有一点语法的不同： a. react事件的绑定属于的命名采用驼峰式写法，而不是小写 b. 如果采用JSX的语法你需要传入一个函数作为事件处理函数，而不是一个字符串（DOM元素的写法）在react中不能使用return false的方式阻止默认行为，必须明确的使用preventDafault change(){ this.setState({ name: 'hello', }) console.log(111) } React更新数据的方法，需要使用this.setState 对比vue使用的是@click
react的条件语句
changeColor(){
```
 this.setState(prevState => ({
```
```
   color: !prevState.color
```
```
}));
```
```
if(this.state.color === true) {
```
```
  console.log(111)
```
```
}else {
```
```
  console.log(222)
```
```
}
```
//控制元素的显示隐藏通过css样式在通过this.setstate进行数据的更新
```
if(this.state.show)
```
```
    {
```

        document.getElementById('parent').style.display = 'block';

```
    }
```
```
    else
```
```
    {
```

        document.getElementById('parent').style.display = 'none';

```
    }
```

    this.setState({show: !this.state.show});

}
render() {
```
return (
```
```
  <div>
```
```
    <div onClick = { this.change }>
```
```
    {this.state.name}
```
```
  </div>
```

  {/* 事件处理以及判断语句 */}

  <button onClick={this.handleToggleClick}>

```
   //三目预算符
```

      {this.state.showWarning ? '隐藏' : '显示'}

```
    </button>
```
```
    {/* 元素的显示隐藏 */}
```

    <p>{this.state.color ? '蓝色' : 'blue'}</p>

    <div id="parent">react实现元素的显示隐藏</div>

    <button onClick={this.changeColor}>点击</button>

```
  </div>);
```
} 对比vue使用的是v-if

7.react的循环遍历数组和对象 render() { var siteElements=[]; //用forEach遍历数据，在定义一个新的数组，在return里面进行渲染 this.state.tags.forEach((item,index)=>{ siteElements.push( //需要有key值，不然会报错，key基本上是为index的值

网站：{item.address}

) }) return (

<div onClick = { this.change }> {this.state.name}

{/* 事件处理以及判断语句 /} {this.state.showWarning ? '隐藏' : '显示'} {/ 元素的显示隐藏 */}

{this.state.color ? '蓝色' : 'blue'}

react实现元素的显示隐藏

点击

{siteElements}

); } 对比vue使用的指令v-for

8.react 的ref 跟 vue的ref使用方法相似 React 支持一种非常特殊的属性 Ref ，你可以用来绑定到 render() 输出的任何组件上。这个特殊的属性允许你引用 render() 返回的相应的支撑实例（ backing instance ）。这样就可以确保在任何时间总是拿到正确的实例。

9.react 的表单及事件 handleChange(event){ console.log(event.target) this.setState({value: event.target.value}); }

{this.state.value}

对比vue表单使用的事v-model实现数据绑定的，

第二天

npm run server 报错错误是：npm ERR! missing script: server

npm ERR! A complete log of this run can be found in: npm ERR! C:\Users\筑梦\AppData\Roaming\npm-cache_logs\2019-06-04T02_38_05_725Z-debug.log

解决办法：npm start 或者是 npm run start 或者是 npm run-script start 都可以直接解决，页面正常打开

npm run build 打包react文件，文件夹是build,正常打包出来的页面是空白页，需要在package.json文件里面加配置"homepage":"./"
{
"name": "my-app",
"version": "0.1.0",
"homepage": "./",
"private": true,
"dependencies": {
```
 "react": "^16.8.6",
```
```
"react-dom": "^16.8.6",
```
愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞 React组件两种导入方式 a. import (常用方式) b. require 区别： Import 是es6语法，require 是commonJS提出的，但是import 会通过babel转换成CommonJS规范
父子组件传值

子组件通过props获取父组件的值，子组件的事件通过ref来获取当前的组件的一些的属性和value值，子组件通过函数发送数据,需要用this.props this.props.handleEmail(val);

父组件写一个函数负责接收子组件的值

区别vue 子组件也是通过props获取父组件的值，需要用到this. $emit this.$ emit("sendiptVal", this.inputValue)

第三天 1.react的生命周期 a.第一个是组件初始化阶段也就是代码中类的构造方法(constructor()),自定义的类继承了react.Component这个基类，也就继承了这个react的基类，才能有render(),生命周期等方法可以使用。 Super(props)用来调用基类的构造方法(constructor()),也将父组件props注入给子组件，供子组件读取(组件中props只读不可变，state可变).而constructor()用来做一些组件的初始化的工作，如定义this.state的初始化内容。 b. 第二个是组件的挂载阶段此阶段分为componentWillMount,render,componentDidMount三个时期 ComponentWillMount: 在组件挂载到DOM前调用，且只会被调用一次，在这边调用this.setState不会引起组件重新渲染，也可以把写在这边的内容提前到constructor(),所以项目中很少用。 Render: 根据组件的props和state(无两者的重传递和重赋值，论值是否有变化，都可以引起组件重新render),return一个React元素(描述组件，即UI),不负责组件实际渲染工作，之后由React自身根据此元素渲染出页面DOM.render是纯函数(Pure function:函数的返回结果只依赖于它的参数；函数执行过程里面没有副作用)，不能在里面执行this.setState,会有改变组件状态的副作用。 componentDidMount: 组件挂载到DOM后调用，且只会被调用一次。 c.第三个是组件的更新阶段在讲述此阶段前需要先明确下react组件更新机制。setState引起的state更新或父组件重新render引起的props更新，更新后的state和props相对之前无论是否有变化，都将引起子组件的重新render.

d.造成组件更新有两类(三种)情况： 1.父组件重新render 父组件重新render引起子组件重新render的情况有两种 i. 直接使用，每当父组件重新render导致的重传props,子组件将直接跟着重新渲染，无论props是否有变化。可通过shouComponentUpdata方法优化 ii. 在componentWillREceiveProps方法中，将props转换成自己的state 是因为componentWillReceiveProps中判断props是否变化，若变化了，this.setState将引起state的变化，从而引起render,此时就没必要在做第二次因重传props引起的render了，不然重复做一样的渲染了 2.组件本身调用setState,无论state有没有变化，可通过shouldComponentUpdate方法优化。此阶段分为componentWillReceiveProps,shouldComponentUpdate,componentWillUpdate, render,componentDidUpdate i. componentWillReceiveProps(nextProps) 用于数据的监听此方法只调用于props引起的组件更新过程中，参数nextProps是父组件传给当前组件的心props。但父组件render方法的调用不能保证重传给当前组件的props是有变化的，所以在方法中根据nextProps和this.props来查明重传的props是否改变，以及如果改变了要执行啥，比如根据新的props调用this.setState出发当前组件的重新render ii. shouldComponentUpdate(nextProps,nextState) 此方法通过比较nextProps,nextState及当前组件的this.props,this.state,返回true时当前组件将继续执行更新过程，返回false则当前组件停止更新，以此可以用来减少组件的不必要渲染，优化组件性能。 iii. componentWillUpdate(nextProps,nextState) 此方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。 iv. render render方法在调用render方法前执行，在这边可执行一些组件更新发生前的工作，一般较少用。 v. componentDidUpdate(prevProps,prevState) 此方法在组件更新后被调用，可以操作组件更新的DOM,prevProps和prevState 这两个参数指的是组件更新前的props和state. 3.卸载阶段此阶段只有一个生命周期方法：componentWillUnmount i. componentWillUnmount 此方法在组件被卸载前调用，可以在这里执行一些清理工作，比如清楚组件中使用的定时器，清楚compontDidMount中手动创建的DOM元素等，以避免引起内存泄漏。

Vue八个生命周期
数据的监听是用watch


react对比vue 的生命周期

beforeMount (componentDidMount) mounted (componentDidMount) beforeUpdate (componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate) updated (componentDidUpdate) beforeDestroy (componentWillUnmount) destroyed (componentDidUnmount)

2.类似的vue的computed computed属性是vue的一大特色，它依赖于props、data生成新的计算数据，会根据props和data的改变而改变。computed中的数据默认只有getter属性，也可设置setter属性。在react中想对props或者state再加工一般都是另外再初始化一个state数据或者在render函数中创建临时变量，特别是一些在显示前的排序过滤方法都在render里调用。另外computed中还包括vuex中mapState和mapGetters的数据。

3.为什么虚拟的dom会提高性能虚拟dom相当于在js和真实的dom中间加了一个缓存，利于dom diff算法避免了没有必要的dom操作，从而提高性能

4.受控组件和不受控组件受控组件：受控组件（Controlled Component）代指那些交由 React 控制并且所有的表单数据统一存放的组件。是存放在组件状态数据中。任何时候我们需要改变username变量值时，我们应当调用setState函数进行修改。不受控组件：则是由DOM存放表单数据，并非存放在 React 组件中。我们可以使用 refs 来操控DOM元素。

5.为什么浏览器无法读取JSX 浏览器只能处理 JavaScript 对象，而不能读取常规 JavaScript 对象中的 JSX。所以为了使浏览器能够读取 JSX，首先，需要用像 Babel 这样的 JSX 转换器将 JSX 文件转换为 JavaScript 对象，然后再将其传给浏览器。