react的学习

React的学习

第一天

1. react的安装
2. 按照官网安装
3. 建立的项目，文件是.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}

); } }

5. 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

6. react的条件语句

7. changeColor(){

8. this.setState(prevState => ({
   复制代码

9. color: !prevState.color
   复制代码

10. }));
    复制代码

11. if(this.state.color === true) {
    复制代码

12. console.log(111)
    复制代码

13. }else {
    复制代码

14. console.log(222)
    复制代码

15. }
    复制代码

    //控制元素的显示隐藏经过css样式 在经过this.setstate进行数据的更新

16. if(this.state.show)
    复制代码

17. {
    复制代码

18. document.getElementById('parent').style.display = 'block';
    复制代码

19. }
    复制代码

20. else
    复制代码

21. {
    复制代码

22. document.getElementById('parent').style.display = 'none';
    复制代码

23. }
    复制代码

24. this.setState({show: !this.state.show});
    复制代码

25. }

26. render() {

28. return (
    复制代码

29. <div>
    复制代码

30. <div onClick = { this.change }>
    复制代码

31. {this.state.name}
    复制代码

32. </div>
    复制代码

33. {/* 事件处理以及判断语句 */}
    复制代码

34. <button onClick={this.handleToggleClick}>
    复制代码

35. //三目预算符
    复制代码

36. {this.state.showWarning ? '隐藏' : '显示'}
    复制代码

37. </button>
    复制代码

38. {/* 元素的显示隐藏 */}
    复制代码

39. <p>{this.state.color ? '蓝色' : 'blue'}</p>
    复制代码

40. <div id="parent">react实现元素的显示隐藏</div>
    复制代码

41. <button onClick={this.changeColor}>点击</button>
    复制代码

42. </div>);
    复制代码

43. } 对比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实现数据绑定的，

次日

1. 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 均可以直接解决，页面正常打开

2. npm run build 打包react文件，文件夹是build,正常打包出来的页面是空白页，须要在package.json文件里面加配置"homepage":"./"

3. {

4. "name": "my-app",

5. "version": "0.1.0",

6. "homepage": "./",

7. "private": true,

8. "dependencies": {

9. "react": "^16.8.6",
   复制代码

10. "react-dom": "^16.8.6",
    复制代码

11. 愿你三冬暖，愿你春不寒，愿你天黑有灯，下雨有伞 React组件两种导入方式 a. import (经常使用方式) b. require 区别： Import 是es6语法，require 是commonJS提出的，可是import 会经过babel转换成CommonJS规范

12. 父子组件传值

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

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

区别vue 子组件也是经过props获取父组件的值，须要用到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 对象，而后再将其传给浏览器。