react基础

1. 什么是react？

• 起源于Facebook，用来架构Ins网站。
• React 是一个声明式，高效且灵活的用于构建用户界面的 JavaScript 库。使用 React 可以将一些简短、独立的代码片段组合成复杂的 UI 界面，这些代码片段被称作“组件。

1. react是用于构建用户界面的。
2. react使用了组件化的思想。

2.react有什么优势

1. 它引入了一种新的方式来处理浏览器DOM，运用虚拟DOM实现了一个非常强大的渲染系统，提升了DOM的渲染效率。
2. 设计优秀，一切基于js并且实现了组件化开发思想。
3. 开发团队强悍，不用担心断更问题。
4. 社区强大，很多问题能找到对应解决方案。
5. 提供了无缝转到ReactNative上的开发体验。
6. 很多企业中前端选型采用的是react。

3. 核心概念

虚拟DOM

1. dom的本质是是什么
   浏览器中的概念，用JS对象来表示页面上的元素，并提供了DOM操作的API。
2. 什么是react中的虚拟dom
   是框架中的概念，是程序员用js对象来模拟页面上的DOM和DOM嵌套。
3. 为什么实现虚拟dom
   为了实现页面中，DOM元素的高效更新。
4. DOM和虚拟DOM的区别

4. 和vue的对比

• 相同之处
  组件化的思想
  virtual dom（虚拟dom）
• 不同之处

1. 数据不可变

• react整体是函数式的思想，把组件设计成纯组件，状态和逻辑通过参数传入，所以在react中，是单向数据流，推崇结合immutable来实现数据不可变。
• vue的思想是响应式的，也就是基于是数据可变的，通过对每一个属性建立Watcher来监听，当属性变化的时候，响应式的更新对应的虚拟dom。

2. 使用js方式，还是模板方式

• react的思路是all in js，通过js来生成html，所以设计了jsx，还有通过js来操作css，社区的styled-component、jss等。
• vue是把html，css，js组合到一起，用各自的处理方式，vue有单文件组件，可以把html、css、js写到一个文件中.

3. 组件的定义
   react使用类的方式定义组件
   vue使用声明的方式定义组件
4. 什么功能内置什么交给社区
   react自己做事情很少，大部分都是由社区在维护
   vue由很多功能是自己内置的

5. react的使用

1. react快速使用

1. 引入react的js文件
2. 在界面上创建一块react控制区域
3. 通过ReactDOM提供的render函数去进行界面的渲染

api

ReactDOM.render函数
参数：
react对象；
这个react对象渲染的位置，是一个dom对象。

React.createElement函数，创建react对象
参数：
创建react对象标签名
这个标签的属性
第三个参数是子元素

2. jsx

jsx是javascript的语法扩展，它拥有js的全部特性，并且包含一些新的语法。

// 声明一个react元素
const element = <h1>Hello, world!</h1>;

1. 在jsx中插入表达式

• 都是使用{}的方式插入的表达式，不管是变量还是事件的定义
• 设置class的时候是通过className的方式设置的

3. 组件

1. 函数式组件
   通过函数的方式定义组件，可用于定义简单的组件。
   参数：
   props 父级传过来的参数
   输出：
   React对象，使用jsx的话可以直接写html标签。
2. class定义组件
   通过类的方式定义组件，与函数式组件不同的是通过类定义的组件有this,声明周期以及state。

• 这个类需要继承React.Component
• 如何要初始化state，可以构造器中初始化，接受一个props参数，需要在第一行调用super(props）
• 需要有个render函数，这个render返回react对象

3. 注意事项

• 组件名字大写
• 只有一个根元素

生命周期

新版：

旧版：

添加事件

1. 如何添加一个事件

// 注意的是事件绑定的一定是一个函数，所以是不加()的
<button onClick={ this.handleClick}>按钮1</button>

2. 如何在函数中拿到this
   手动给这个事件bind个this bind(this)
   或使用箭头函数来定义事件
3. 如何给函数传递参数

<button onClick={ ()=>this.handleClick3(buttonName)}>按钮3</button>

条件渲染

1. 直接在代码中定义一个变量，根据条件的不同设置不同的变量值
2. 使用&&进行条件渲染

{
  !isLogin && <button onClick={ this.handleClick2}>登录</button>
}

3. 可以使用三目表达式

{
    isLogin ? <button onClick={ ()=>this.handleClick3(buttonName)}>退出登录</button>
    :
    <button onClick={ this.handleClick2}>登录</button>
}

循环渲染

本质上还是使用js的语法进行循环渲染，渲染列表的时候注意加上key值

 class List extends React.Component {
            constructor(props){
                super(props);
                this.state={
                    list:[
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'},
                ]
                }
            }
            render() {
                // 本质就是渲染数组
                const list = [
                    <li key="1">第一个</li>,
                    <li key="2">第二个</li>
                ]

                const dataList = [
                    {id:1,name:'张三'},
                    {id:2,name:'李四'},
                    {id:3,name:'王五'},
                ];

                // map()

                return (
                   <ul>
                    {
                        this.state.list.map((item,index)=>{
                            return <li key={item.id}>{item.name}</li>
                        })
                    }
                   </ul>
                )
            }
        }

        ReactDOM.render(<List />,document.getElementById('app'))

表单

这里表单数据无法像vue中使用双向绑定。

1. 定义state
2. 定义onChange事件，在事件中修改state的值

class Form extends React.Component {
            constructor(props){
                super(props);
                this.state={
                    name:'测试'
                }
            }
            handleChange=(e)=>{
                this.setState({
                    name:e.target.value
                })
            }        
            render() {
               const {name} = this.state;
                return (
                   <div>
                        <input type="text" value={name} onChange={this.handleChange}/>
                   </div>
                )
            }
        }
        ReactDOM.render(<Form />,document.getElementById('app'))

状态提升

当兄弟组件之间的数据相互依赖的时候，可以将共享状态提升到最近的共同父组件中去。

组件库

Ant Design