React细节的这方方面面

能体现本身平时的技术积累，和自学总结提高能力 这才是不悔走进前端！~

---

React 定义组件

function

class 定义的组件有this，状态，生命周期

在项目工做中，若是当前的元素是静态的，不变的，那么通常会使用function的方法定义组件

若是当前组件中的元素是由数据渲染出来的，通常会采用class的方法定义；

jsx 元素就是React.createElement的语法糖

render：渲染成真实的DOM；而且添加到页面中；

React中index.js做为入口文件，一般用来导入须要加载的模块

ReactDOM.render(</>,document.querySelector("#root"),function(){
回调函数是当真实的DOM都渲染完毕以后执行该函数
})
复制代码

经过class定义的组件,元素取值直接props.属性名

class Con extends React.Component{
    constructor(){
    //在constructor中不能直接获取传递过来的属性；须要constructor的参数接收一下；
        super();
    }
    render(){
        return <div>{this.props.h}</div>
    }
}
ReactDOM.render(<div>
    <Con h='zfpx'/>
</div>,document.querySelect("#root"))
复制代码

属性和状态 只要这两个数据发生改变，试图就会随着刷新

属性：从父组件传递过来的，单向数据流，不可改变

状态: 是本身私有的；能够修改 ，经过serState 去更改状态；从而让试图刷新；

class Con extends React.Component{
    constructor(){
    //在constructor中不能直接获取传递过来的属性；须要constructor的参数接收一下；
        super();
        this.state = {a:!}
    }
    hand=()=>{
        //返回的对象会将原有的状态覆盖；
        this.setState((prevState)=>({a:prevState.a+1}))
    }
    render(){
        return <div onClick={this.hand}>{this.props.h}</div>
    }
}
ReactDOM.render(<div>
    <Con h='zfpx'/>
</div>,document.querySelect("#root"))
复制代码

class 的方法默认不会绑定 this

1. 没有在方法后面添加 ()，例如 onClick={this.handleClick}，你应该为这个方法绑定 this

2. 若是条件是 true，&& 右侧的元素就会被渲染，若是是 false，React 会忽略并跳过它

3. 能隐藏组件，即便它已经被其余组件渲染让 render 方法直接返回 null，而不进行任何渲染

render 方法中返回 null 并不会影响组件的生命周期

4. 使用索引来用做 key 值会致使性能变差，还可能引发组件状态的问题

选择不指定显式的 key 值，那么 React 将默认使用索引用做为列表项目的 key 值

5. 受控组件：在 HTML 中，表单元素（如<input>、 <textarea> 和 <select>）之类的表单元素一般本身维护 state，并根据用户输入进行更新

6. 在 React 中，可变状态（mutable state）一般保存在组件的 state 属性中，而且只能经过使用 setState()来更新

7. 能够将数组传递到 value 属性中，以支持在 select 标签中选择多个选项
<select multiple={true} value={['B', 'C']}>
复制代码

文件 input 标签

1. 由于它的 value 只读，因此它是 React 中的一个非受控组件

2. 组件能够接受任意 props，包括基本数据类型，React 元素以及函数

3. 语义化的 HTML 是无障碍辅助功能网络应用的基础

打包是一个将文件引入并合并到一个单独文件的过程

1. 使用 ES6 的 class 关键字建立组件，你能够经过给 this.state 赋值的方式来定义组件的初始 state

2. 调用setState函数以后，react会将传入的参数对象与组件当前的状态合并

3. 在 React 获得元素树以后，React 会自动计算出新的树与老树的节点差别，而后根据差别对界面进行最小化重渲染

4. React 中 refs 的做用是访问 DOM 元素或者某个组件实例的句柄

5. 在组件须要包含内部状态或者使用到生命周期函数的时候使用 Class定义组件

6. Keys 是 React 用于追踪哪些列表中元素被修改、被添加或者被移除的辅助标识 React Diff 算法中 React 会借助元素的 Key 值来判断该元素是新近建立的仍是被移动而来的元素，从而减小没必要要的元素重渲染

7. componentDidMount钩子函数里发送ajax请求

8. shouldComponentUpdate 能够手动地判断是否要进行组件更新，根据组件的应用场景设置函数的合理返回值可以帮咱们避免没必要要的更新

9. setState 函数的第二个参数的做用是函数会在setState函数调用完成而且组件开始重渲染的时候被调用，咱们能够用该函数来监听渲染是否完成

componentWillMount：组件即将被装载、渲染到页面上

componentDidMount:组件真正在被装载以后

componentWillReceiveProps:组件将要接收到属性的时候调用

shouldComponentUpdate:组件接受到新属性或者新状态的时候（能够返回 false，接收数据后不更新，阻止 render 调用，后面的函数不会被继续执行了）

componentWillUpdate:组件即将更新不能修改属性和状态

render:组件从新描绘

componentDidUpdate:组件已经更新

componentWillUnmount:组件即将销毁
复制代码

---

虚拟 dom 会提升性能?

虚拟 dom 至关于在 js 和真实 dom 中间加了一个缓存，利用 dom diff 算法避免了没有必要的 dom 操做

类组件(Class component)和函数式组件(Functional component)之间有何不一样

类组件不只容许你使用更多额外的功能，如组件自身的状态和生命周期钩子，也能使组件直接访问 store 并维持状态

当组件仅是接收 props，并将组件自身渲染到页面时，该组件就是一个 '无状态组件(stateless component)'，可使用一个纯函数来建立这样的组件。这种组件也被称为哑组件(dumb components)或展现组件
复制代码

(组件的)状态(state)和属性(props)之间有何不一样？

State 是一种数据结构，用于组件挂载时所需数据的默认值。

State 可能会随着时间的推移而发生突变，但多数时候是做为用户事件行为的结果。

Props(properties 的简写)则是组件的配置。

props 由父组件传递给子组件，而且就子组件而言，props 是不可变的(immutable)。

组件不能改变自身的 props，可是能够把其子组件的 props 放在一块儿(统一管理)。

Props 也不只仅是数据--回调函数也能够经过 props 传递。
复制代码

何为高阶组件(higher order component)？

高阶组件是一个以组件为参数并返回一个新组件的函数。

HOC 运行你重用代码、逻辑和引导抽象。最多见的多是 Redux 的 connect 函数。

除了简单分享工具库和简单的组合，HOC 最好的方式是共享 React 组件之间的行为。

若是你发现你在不一样的地方写了大量代码来作同一件事时，就应该考虑将代码重构为可重用的 HOC。
复制代码

为何建议传递给 setState 的参数是一个 callback 而不是一个对象？

由于 this.props 和 this.state 的更新多是异步的，不能依赖它们的值去计算下一个 state。
复制代码

除了在构造函数中绑定 this，还有其它方式吗？

你可使用属性初始值设定项(property initializers)来正确绑定回调，create-react-app 也是默认支持的。在回调中你可使用箭头函数，但问题是每次组件渲染时都会建立一个新的回调。

(在构造函数中)调用 super(props) 的目的是什么？

在 super() 被调用以前，子类是不能使用 this 的，在 ES2015 中，子类必须在 constructor 中调用 super()。传递 props 给 super() 的缘由则是便于(在子类中)能在 constructor 访问 this.props。
复制代码

1. 应该在 React 组件的何处发起 Ajax 请求

在 React 组件中，应该在 componentDidMount 中发起网络请求。这个方法会在组件第一次“挂载”(被添加到 DOM)时执行，在组件的生命周期中仅会执行一次。更重要的是，你不能保证在组件挂载以前 Ajax 请求已经完成，若是是这样，也就意味着你将尝试在一个未挂载的组件上调用 setState，这将不起做用。在 componentDidMount 中发起网络请求将保证这有一个组件能够更新了。
复制代码

2. React 中有三种构建组件的方式

React.createClass()、ES6 class 和无状态函数。

react 组件的划分业务组件技术组件？

根据组件的职责一般把组件分为 UI 组件和容器组件。

UI 组件负责 UI 的呈现，容器组件负责管理数据和逻辑。

二者经过 React-Redux 提供 connect 方法联系起来。

React 项目用过什么脚手架

creat-react-app Yeoman 等

了解 redux 么，说一下 redux 吧

redux 是一个应用数据流框架，主要是解决了组件间状态共享的问题，原理是集中式管理。

主要有三个核心方法，action，store，reducer，工做流程是 view 调用 store 的 dispatch 接收 action 传入 store，reducer 进行 state 操做，view 经过 store 提供的 getState 获取最新的数据。

flux 也是用来进行数据操做的，有四个组成部分 action，dispatch，view，store，工做流程是 view 发出一个 action，派发器接收 action，让 store 进行数据更新。

更新完成之后 store 发出 change，view 接受 change 更新视图。

Redux 和 Flux 很像。主要区别在于 Flux 有多个能够改变应用状态的 store，在 Flux 中 dispatcher 被用来传递数据到注册的回调事件，可是在 redux 中只能定义一个可更新状态的 store，redux 把 store 和 Dispatcher 合并。

结构更加简单清晰新增 state,对状态的管理更加明确，经过 redux。

流程更加规范了，减小手动编码量，提升了编码效率，同时缺点时当数据更新时有时候组件不须要，可是也要从新绘制，有些影响效率。通常状况下，咱们在构建多交互，多数据流的复杂项目应用时才会使用它们。

redux 有什么缺点

一个组件所须要的数据，必须由父组件传过来，而不能像 flux 中直接从 store 取。

当一个组件相关数据更新时，即便父组件不须要用到这个组件，父组件仍是会从新 render，可能会有效率影响，或者须要写复杂的 shouldComponentUpdate 进行判断。

。。。未完待更新！