React 学习笔记

(day1)

1.初始react

　　react的基本概念：React是Facebook开发出的一款JS库，Facebook认为MVC无法满足他们的扩展需求（2013年5月开源）

　　特点：

　　　　①声明式设计：直接有返回值；

　　　　②高效；灵活；

　　　　③组件：react中一切皆为组件

　　　　④JSX*：是js语法的扩展，可以在js文件中书写html结构；

　　　　⑤单向响应的数据流：要改变state中的数据时，需要手动的使页面更新（利用this.setState，后面会介绍他的用法）

　　　　⑥react是一个轻量级的js库；响应式；不是一个mvc框架；不使用模板；

　　　　

 　　原理：

　　　　虚拟DOM react把DOM抽象成为一个JS对象

　　　　diff算法

　　　　虚拟DOM确保对界面真正发生变化的部分进行实际的DOM操作

　　　　逐层次的来进行节点的比较

　　node.js是MVC框架，而Vue是MVVM框架（其实，如果没有Vuex那么Vue只是一个MV框架），而React则是一个不完整的MVC/MVVM框架；

react中利用函数化/式编程：也就是说输入一个值，输出的结果是特定的；

2.基本环境搭建

　　react开发环境的搭建

　　　　1.react.js 核心文件

　　　　2.react-dom.js 渲染页面Dom 当前文件依赖于react核心文件

　　　　3.babel.js ES6转ES5 JSX语法转化成javascript 浏览器的兼容

　　下载

　　　　react 核心包     npm i react --s

　　　　react-dom 　　 npm i react-dom --s

　　　　babel　　　　  npm i babel-standalone --s

3.jsx使用

　　jsx=JavaScript xml  是js的扩展语法

　　优点： 1.执行效率更快

　　　　     2.他是类型安装的，编译过程中能及时发现错误

　　　　　 3.在使用jax的时候编译会更加的简单和快速

　

 　　语法：

　　　　1.注释：{/*我是需要注释的内容*/}

　　　　2.多行标签：需要有一个父元素包裹

　　　　3.变量：语句中使用已定义的变量时用{}包裹

　　　　4.ReactDOM.render(jsx内容,dom节点)

　　　　5.<script type="text/babel"></script>  script标签需要加type属性

4.遍历数组

 

5.遍历对象

Object.keys(obj);方法会返回一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

Object.values(obj);方法返回一个给定对象自己的所有可枚举属性值的数组，数组中属性名的排列顺序和正常循环遍历该对象时返回的顺序一致 。

 
(day2)

6.组件基础

组件特点：高内聚低耦合

组件当中的重要内容：1.构建方式 2.组建的属性 3.生命周期

react的组件分成3个部分： 1.属性props  2.状态state 3.生命周期

react的组件：通过组件可以把页面中的ui部分分成 独立的 高复用的部分 让每个开发者更加专注于一个个独立的组件

组件与组件化：组件就是用实现页面局部功能的代码集合 简化页面的复杂程度 提高运行效率；组件化是指当前程序全部是由组件构成的

组件的创建：1.函数创建/无状态组成 2.类组件

注意：组件名称首字母必须大写

(普通组件)

 (父子组件)

 2.类组件

(普通组件)

7.props基础

8.props验证与默认值

props验证需要先下载并引入prop-types包   npm install prop-types --save

 

9.渲染外部数据与练习

10.state属性

 

 

11.ref转发

字符串方式

回调函数方式

 

 React.createRef

12.事件与this指向

 

13.条件渲染

（jsx中不允许使用if，所以可给一个标识符用以判断）

 

14.状态提升

多个子组件可能使用相同的数据，提升到他们最近的父组件中，多个子组件需要利用他们状态的情况下，那么就需要用到状态提升

15.react脚手架

1.npm install create-react-app -g   //全局安装脚手架

2.cd 需要创建的文件夹中

3.create-react-app 项目名 //创建项目

4.npm start   //启动项目

16.react组件的基本使用

1.在组件的js文件中 rcc 可快速创建出一个基本组件的框架

2.Fragment标签和require引用

React 中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。

key 是唯一可以传递给 Fragment 的属性。未来我们可能会添加对其他属性的支持，例如事件。

 

17.react的组件传值

父组件向子组件传值（通过props传值）

子组件：

1
2
3
4
5
6
7
8
9
10
class Children extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div>这是：{this.props.name}</div> // 这是 父向子
    )
  }
}

父组件:

1
2
3
4
5
6
7
8
9
class App extends React.Component{
  render(){
    return(
      <div>
        <Children name="父向子"/>
      </div>
    )
  }
}

父组件向子组件传值（回调函数）

子组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
class Children extends Component{
  constructor(props){
    super(props);
  }
  handerClick(){
    this.props.changeColor('skyblue') // 执行父组件的changeColor 并传参 必须和父组件中的函数一模一样
  }
  render(){
    return(
      <div>
        <div>父组件的背景色{this.props.bgcolor}</div> // 子组件接收父组件传过来的值 bgcolor
        <button onClick={(e)=>{this.handerClick(e)}}>改变父组件背景</button> // 子组件执行函数
      </div>
    )
  }
}

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class Father extends Component{
  constructor(props){
    super(props)
    this.state = {
      bgcolor:'pink'
    }
  }
  bgChange(color){
    this.setState({
      bgcolor:color
    })
  }
  render(props){
    <div style={{background:this.state.bgcolor}}>
            // 给子组件传递的值 color
      <Children bgcolor={this.state.bgcolor} changeColor={(color)=>{this.bgChange(color)}} />
                        // changeColor 子组件的参数=color 当做形参
    </div>
  }
}

兄弟组件传值（子传给父，父再传给另一个子）

子组件1

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class Children1 extends Component{
  constructor(props){
    super(props);
  }
  handerClick(){
    this.props.changeChild2Color('skyblue')
    // 改变兄弟组件的颜色 把changeChild2Color的参数传给父
  }
  render(){
    return(
      <div>
        <div>children1</div>
        <button onClick={(e)=>{this.handerClick(e)}}>改变children2背景</button>
      </div>
    )
  }
}

子组件2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
class Children2 extends Component{
  constructor(props){
    super(props);
  }
  render(){
    return(
      <div style={{background:this.props.bgcolor}}>
      // 从父元素获取自己的背景色
        <div>children2 背景色 {this.props.bgcolor}</div>
        // children2 背景色 skyblue
      </div>
    )
  }
} 

父组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
class Father extends Component{
  constructor(props){
    super(props)
    this.state = {
      child2bgcolor:'pink'
    }
  }
  onchild2bgChange(color){
    this.setState({
      child2bgcolor:color
    })
  }
  render(props){
    <div>
      <Children1 changeChild2Color={(color)=>{this.onchild2bgChange(color)}} />
      <Children2 bgcolor={this.state.child2bgcolor} />
    </div>
  }
}

18.react的生命周期

组件的生命周期可分成三个状态：

  • Mounting：已插入真实 DOM
  • Updating：正在被重新渲染
  • Unmounting：已移出真实 DOM

生命周期的方法有：

    • componentWillMount 在渲染前调用,在客户端也在服务端。

    • componentDidMount : 在第一次渲染后调用，只在客户端。之后组件已经生成了对应的DOM结构，可以通过this.getDOMNode()来进行访问。 如果你想和其他JavaScript框架一起使用，可以在这个方法中调用setTimeout, setInterval或者发送AJAX请求等操作(防止异步操作阻塞UI)。

    • componentWillReceiveProps 在组件接收到一个新的 prop (更新后)时被调用。这个方法在初始化render时不会被调用。

    • shouldComponentUpdate 返回一个布尔值。在组件接收到新的props或者state时被调用。在初始化时或者使用forceUpdate时不被调用。
      可以在你确认不需要更新组件时使用。

    • componentWillUpdate在组件接收到新的props或者state但还没有render时被调用。在初始化时不会被调用。

    • componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用。

    • componentWillUnmount在组件从 DOM 中移除之前立刻被调用。

19.react的路由

 2.

index.js中

app.js中

 3.exact 精准匹配  

　　

 4.switch 当有相同的Route path出现时

5.重定向redirect

 6.二级路由（在组件中引用）

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/kangxinzhi/p/13731473.html