React总结之基础(一)

时间 2019-12-05

标签 react 总结基础栏目 React 繁體版

原文原文链接

中文官网html

英文官网前端

一. React是什么?

用于构建用户界面的JavaScript库(框架)

二. React的特色有哪些?

声明式编程
- 以声明式编写UI,可让你的代码更加可靠,且方便调试
组件化开发(高内聚,低耦合)
- 组件逻辑使用JavaScript编写而非模板,所以能够轻松的在应用中传递数据,并使得状态与DOM分类
一次学习,随处编写
- 可使用Node进行服务端渲染
- 能够作APP(ReactNative)

三. 基本使用步骤

下载引入相关js文件vue
- React核心文件 -->js/react.development.js
- React操做DOM文件 --> js/react-dom.development.js
- Babel运行时,负责把React代码转换成浏览器认识的代码 -->js/babel.min.js
经过React实现前端效果react
- script标签的类型必须为<script type="text/babel">

<!--代码以下-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <script src="js/react.development.js"></script>
  <script src="js/react-dom.development.js"></script>
  <script src="js/babel.min.js"></script>
  <script type="text/babel">
    ReactDOM.render(<h1>hello world</h1>,document.getElementById('root'))
  </script>
</body>
</html>
复制代码

四. JSX基础语法

JSX是一个JavaScript的语法扩展(能够在js代码中直接写标签)
标签能够嵌套

<script type="text/babel">
    // let element = <div>Hello world!!!</div>
    let element = (    // ---> 这里的()是可选的
      <div>
        <div>Hello</div>
        <div>world</div>
      </div>
    )
    ReactDOM.render(element,document.getElementById('root'))
  </script>
复制代码

JSX标签中的注释 {/**/}

五. JSX中使用表达式

标签中使用插值表达式:单的花括号(vue是双花括号)

<script type="text/babel">
  // let element = <div>text</div>
  let info = {
    name: 'zs',
    age: 18
  }
  let element = (
    <div>
      <div>{info.name}</div>
      <div>{info.age}</div>
    </div>
  )
  ReactDOM.render(element,document.getElementById('root'))
</script>
复制代码

插值表达式中支持基本的表达式计算

<div>{ 6 + 1 }</div>
复制代码

表达式中支持函数调用(函数调用也是表达式)

<script type="text/babel">
    let foo = function () {
      return 'hello world!'
    }
    let element = (
      <div>
        <div>{ foo() }</div>
      </div>
    )
    ReactDOM.render(element,document.getElementById('root'))
</script>
复制代码

标签属性中也支持表达式

// JSX中样式类必须使用className属性,不可使用class属性
<script type="text/babel">
    let cn = 'active';
    let element = (
      <div>
        <div className={ cn }>测试属性</div>
      </div>
    )
    ReactDOM.render(element,document.getElementById('root'))
</script>
复制代码

JSX自己也是一个表达式编程

能够赋值给变量

let element = <div>JSX表达式</div>
复制代码

能够做为函数的返回值

let foo = function () {
    return <div>hello world!</div>
}
复制代码

能够做为函数的参数

let foo = function (param) {
    return <div>{param}</div>
}
let element = (
    <div>
        <div>{ foo(<div>参数</div>) }</div>
    </div>
)
ReactDOM.render(element,document.getElementById('root'))
复制代码

六. JSX条件渲染

js分支结构

<script type="text/babel">
    function showInfo(flag) {
        if (flag) {
            return <div>hello</div>
        } else {
            return <div>world</div>
        }
    }
    let element = <div>showInfo(false)</div>
    ReactDOM.render(element,document.getElementById('root'))
</script>
复制代码

元素变量

let data = <div>hello</div>
if (true) {
    data = <div>world</div>
}
复制代码

与运算符&&

// &&前面的条件成立,就显示后面的内容,不然不显示
let flag = true;
let addData = <div>{flag && <div>hello</div>}</div>
复制代码

三目运算符

let flag = false;
let msg = <div>{ flag ? <div>hello</div> : <div>world</div>}</div>
复制代码

阻止渲染:经过return null终止函数返回JSX内容

function foo(flag) {
    if(flag) {
        //若是这里执行,那么久终止后续代码的执行,最终不会进行渲染
        return null;
    }
    return <div>阻止渲染</div>;
}
复制代码

七. JSX列表渲染

使用数组map方法对列表中的数据进行加工,造成一个新的数组,而后放到插值表达式中.

let data = ['公孙离','橘右京','孙尚香','娜可露露'];
let nz = data.map((item,i) => {
  return <div key={i}><span>{item}</span></div>
});
let element = (
  <div>{nz}</div>
);
ReactDOM.render(element,document.getElementById('root'));
复制代码

key的做用:数组
- 列表的同级添加key属性,要确保key的惟一性

八. JSX的底层原理

JSX本质上是经过下面的方式建立元素的,JSX元素的本质是对象 React.createElement(element, [props], [...children])
- 参数1:表示标签的名称
- 参数2:表示标签的属性列表
- 参数3:表示子元素内容

let element = (
    <h2 className = "active">
        Hello world!
    </h2>
);
// 上面的代码能够用如下形式表示:
let element = React.createElement(
    'h2',
    {className: 'active'},
    'Hello world'
);
复制代码

九. 样式操做

class样式

let element = <div className='active'>Hello</div>
复制代码

style样式:不可使用字符串形式

let style = {
    color: 'pink',
    backgroundColor: '#ccc'
}
let element = <div style = {style}>Hello</div>
复制代码

十. 组件

使用函数建立组件浏览器
- 函数首字母大写
- 函数返回值为JSX
- 组件模板必须有惟一的根元素
```
function Welcome() {
    return <div>Hello world</div>
}
复制代码
```
函数父组件向子组件传值bash
- 经过函数的参数传值
- 子组件经过参数获取到的props,值不容许修改(单向数据流,只能从父组件向子组件传递)
```
// 父组件内容
let m = 10;
<Child num = {n} uname='jack'/>
// 子组件
function Child(props) {
    return <div>Hello {props.uname}</div>
}
复制代码
```
类的继承babel
- 经过extends关键字实现继承
```
class Student extends Person {}
复制代码
```
- ES6中,在子类的constructor中必须先调用super才能引用this
- 若是没有定义构造函数,会默认生成一个,携带所有参数
```
// 默认构造函数
constructor (...props) {
    super (...props);
}
复制代码
```

使用类建立组件框架

须要继承React.Component
须要提供render方法,用于渲染模板

class Welcome extends React.Component {
    render() {
        return (
            <div><h1>类组件</h1></div>
        )
    }
}
复制代码

父组件向子类组件传值
- 父组件经过props向子组件传值
- 父组件经过属性的方式向子组件传值
组件的内部状态state
- 组件的内部状态保存在state中,state位于构造函数中
- 类组件应该始终使用props参数来调用父类的构造函数
- 经过setState进行状态更新
- render方法中不容许修改state