前端之React学习（一）

react 基本概念

react 的基本概念

React 是 Facebook 开发的一款 JS 库 Facebook 认为 MVC 无法满足他们的扩展需求

特点

react 不使用模板
react 不是一个 MVC 框架
响应式
react 是一个轻量级的 JS 库

原理

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

diff 算法

虚拟DOM确保最对界面上真正发生变化的部分进行实际的DOM操作
逐层次的来进行节点的比较

react 开发环境的搭建

react 的使用

react.js 核心文件
react-dom.js 渲染界面中的 DOM 当前文件依赖于 react 核心文件
babel.js ES6 转换成 ES5 JSX 语法转换成 JS 现今浏览器进行代码的兼容

下载

react 核心包 npm i react --save
react-dom npm i react-dom --save
babel npm i babel-standalone --save

jsx 基本使用

基本概念

jsx = javascript xml (javascript 的扩展语法)
优点： 1. 执行的效率更快 2. 他是类型安全的，编译过程中就能即使发现错误 3. 在使用 jax 的时候编写模板会更加简单和快速

注释

{/* */}

多行标签

需要用一个父元素包裹

jsx 进阶使用

使用表达式

把表达式放入{}

let text = "你好";
let num = 12334;
let myDom = (
  <div>
    <div>{text}</div>
    <div>{num}</div>
  </div>
)

计算

let num = 12334;
let myDom = (
  <div>
    <div>{num}</div>   {/* 12334 */}
    <div>{num+1}</div> {/* 12335 */}
  </div>
)

函数

let user = {
  name: "jack",
  age:17
}
function fun(obj){
  //return "姓名是"+obj.name+"---------"+"年龄是"+obj.age;
  //ES6
  return '姓名是${obj.name}---------$年龄是{obj.age}'
}
let myDom = <div>{fun(user)}</div>

三元/三目运算符

let phone= 4999;
let myDom=(
  <div>当前手机介个是{phone}---------{phone>4000?"很贵":"很便宜'}</div>
)

数组

var arr = [
  <p>新闻列表1</p>,
  <p>新闻列表2</p>,
  <p>新闻列表3</p>,
  <p>新闻列表4</p>,
  <p>新闻列表5</p>
]
let myDom=(<div>{arr}</div>)

属性设置（样式…）

let text = "点我去百度";
let linkUrl = "http://www.baidu.com";
let modstyle = { color: "red", backgroundColor: "pink" };
let myDom = (
  <div>
    <a href={linkUrl}>{text}</a>
    <p style={modstyle}>修改我的样式</p>
  </div>
);

** 注意： **

在 jsx 中不能使用 class 这个属性，因为 class 是 JS 关键字
class————>className

react 列表（遍历数据）

遍历数据的方法

map()循环遍历

 // map()
    let arr = ["吃饭", "睡觉", "打豆豆"];
    let arr1 = arr.map((item, index) => {
      return (<p key={index}>{item}</p>)
    })

    let myDom = (
      <div>
        map循环
        {arr1}
      </div>
    )

for in 循环遍历

//for in循环
    function fun() {
      let newarr = [];
      for (let index in arr) {
        newarr.push(<p key={index}>{arr[index]}</p>)
      }
      return (newarr);
    }
    let myDom = (
      <div>
        for in 循环
        {fun()}

      </div>
    )

for each

点击事件&render 重新渲染事件

let arr = ["吃饭", "睡觉", "打豆豆"];
    let i = 0;
    function fun() {
      let myDom = arr.map((item, index) => {
        return <p key={index} onClick={() => { i = index; console.log(index == i); render() }} style={{ color: i == index ? 'red' : '' }}>{item}</p>
      })
      return myDom
    }
    function render() {
      ReactDOM.render(fun(), document.getElementById("demoReact"));
    }
    render()

遍历对象

对象知识回顾：

取属性 obj.name 或者 obj[name]
.的方法方便，但不能取变量，取变量用[]
对象的方法 Object.keys(obj)------- 返回数组类型，值是对象中的键（key）
对象的方法 Object.values(obj)----- 返回数组类型，值是对象中的值（values）

遍历对象

let obj = {
      name: "小明",
      age: 18,
      sex: "男"
    }
    let myDom = <div>{Object.keys(obj).map((v, i) => {
      return <p>遍历的属性是:{v}--------遍历的值是：{obj[v]}</p>
    })}</div>

面向组件

组件的重要概念

特点

高耦合低内聚

高耦合：把逻辑紧密的内容放进一个组件内
低内聚：不同的组件的依赖关系尽量弱化，每个组件尽量独立

重要组成

构建方式
组件的属性
生命周期

演变过程

传统的组件的明显特点
1. 简单的封装
2. 简单的生猛周期的显现
3. 明显的数据流动
当一个项目比较复杂的时候，传统的组件根本不能很好地把结构样式和行为结合，让项目难以维护

react 组件的组成部分

属性 props
状态 state
生命周期

react 组件的作用

把页面中的 ui 部分切分成独立、高复用性的组件

组件与组件化

组件：
- 就是实现页面剧本功能的代码集合
- 简化页面的复杂程度
- 提高运行效率
组件化：当前程序都是使用组件完成的

组件的创建

函数组件/无状态组件

例子

    function Com1() {
      return (
        <div>我是一个无状态组件</div>
      )
    }
    let myDom = <div>
      <Com1 />
      <Com1></Com1>
    </div>
    ReactDOM.render(myDom, document.getElementById("demoReact"));

父子组件

//父子组件
    function Com1() {
      return (
        <h1>我是第1个组件</h1>
      )
    }
    function Com2() {
      return (
        <h1>我是第2个组件</h1>
      )
    }
    function Com3() {
      return (
        <h1>我是第3个组件</h1>
      )
    }
    function Com4() {
      return (
        <h1>我是第4个组件</h1>
      )
    }
    // 父组件调用子组件
    function Com() {
      return (
        <div>
          <Com1 />
          <Com2 />
          <Com3 />
          <Com4 />
        </div>
      )

    }
    let myDom = <Com />
    ReactDOM.render(myDom, document.getElementById("demoReact"));

类组件

    // 创建类组件
    // 组件名首字母大写
    class Com extends React.Component {
      render() {
        return (
          <div>类组件</div>
        )
      }
    }
    let myDom = <Com />
    ReactDOM.render(myDom, document.getElementById("demoReact"));

props

定义

props 是 react 中的一个重要属性；
是组件对外的接口
用 props 就可以从组件外部向组件内部进行数据传递
父组件给子组件的数据传递
注意：
无论是无状态组件还是类组件，都不能修改自身的 props

使用

无状态组件使用 props

    function Com(props) {
      return (
        // props.xxx(自定义)
        <div>我是一个无状态组件-------外部传递的数据是：{props.text}{props.name}{props.age}</div>
      )
    }
    let demo = "我是数据"
    //多个参数的传递
    let obj = {
      name: "hahah",
      age: 18
    }
    //{...obj}-----ES6
    let myDom = <Com text={demo} {...obj} />
    ReactDOM.render(myDom, document.getElementById("demoReact"));

类组件使用 props

    // 在类组件使用props
    class Com extends React.Component {
      render() {
        return (
          <div>我是类组件--------{this.props.name}------{this.props.num}</div>
        )
      }
    }
    let obj = {
      name: "我是name数据",
      num: "我是num树"
    }
    let myDom = <Com {...obj} />
    ReactDOM.render(myDom, document.getElementById("demoReact"));

验证与默认值

props 验证

验证传递进去的数据是否符合我们期望的类型或者要求（针对开发时，控制台报错却无影响，上线时建议取消）

引用 prop-types 库

<!-- 下载 -->
 -----npm i prop-type --save
<!-- 引用 -->
  <script src="node_modules/prop-types/prop-types.js"></script>

使用

<!-- 组件名.propTypes={
  属性:PropTypes.数据类型
} -->

默认值用 defaultProps

无状态组件 props 的验证与默认值

  //引用
    <script src="node_modules/prop-types/prop-types.js"></script>
  //无状态组件props的验证与默认值
    //默认值用 defaultProps
    function Com(props) {
      return (
        <div>我是无状态组件--------------{props.name}--------{props.age}----{props.num}</div>
      )
    }
    //默认值
    Com.defaultProps = {
      num: "我是props中num的默认值"
    }
    //验证
    Com.propTypes = {
      name: PropTypes.number//验证name是否是数字类型
    }
    let obj = {
      name: "jjjj",
      age: 12

    }
    let myDom = <Com {...obj} />
    ReactDOM.render(myDom, document.getElementById("demoReact"));

类组件 props 的验证与默认值

//引用
<script src="node_modules/prop-types/prop-types.js"></script>
//在类组件中props的验证与默认值
class Com extends React.Component {
  //默认值第二种
  // static defaultProps = {
  //   sex: "我是默认值2"
  // }
  render() {
    return (
      <div> 我是类组件------------{this.props.name}---{this.props.age}---{this.props.num}---{this.props.sex}</div >
    )
  }
}
let obj = {
  name: "hahbjl",
  age: 16
}
//默认值第一种
Com.defaultProps = {
  num: "我是默认值1"
}
//验证
Com.propTypes = {
  name: PropTypes.number
}
let myDom = <Com {...obj} />
ReactDOM.render(myDom, document.getElementById("demoReact"));