React总结之基础(一)一. React是什么? 二. React的特点有哪些? 三. 基本使用步骤四. JSX基础

一. React是什么?

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

二. React的特点有哪些?

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

三. 基本使用步骤

下载引入相关js文件
- React核心文件 -->js/react.development.js
- React操作DOM文件 --> js/react-dom.development.js
- Babel运行时,负责把React代码转换成浏览器认识的代码 -->js/babel.min.js
通过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>
}
```
函数父组件向子组件传值
- 通过函数的参数传值
- 子组件通过参数获取到的props,值不允许修改(单向数据流,只能从父组件向子组件传递)
```
// 父组件内容
let m = 10;
<Child num = {n} uname='jack'/>
// 子组件
function Child(props) {
    return <div>Hello {props.uname}</div>
}
```
类的继承
- 通过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