React 开发你一定要知道

wizChen 发布于2019-08-23 10:42 / 2657人阅读

摘要：组件的的单向数据流，主要的流动管道就是，本身是不可变的。是上的特殊属性在常规的数据流之外强制修改子元素被修改的可以是组件实例，或者一个元素可以在元素上和类组件上添加，组件在加载时将元素传入的回调，在或者这些生命周期前执行。

JSX 基本语法

</>复制代码 
1.定义标签时只允许被一个标签包裹
const component = nameage
2.标签一定要闭合
3.DOM元素属性class和for
class属性改为className   
for属性改为htmlFor 
 
4.自定义html属性，要使用data-前缀
5.属性值需要使用表达式，只要用{}替换""即可
const person = 
6.html转义
React会将所有要显示到DOM的字符串转义，防止XSS
react提供了dangerouslySetInnerHTML属性，谨慎使用

React 数据流

在React中，数据是自顶向下单向流动的，即从父组件到子组件，这条原则让组件之间的关系变的简单且可预测。state和props是React组件中重要的概念，如果顶层组件初始化props，那么React会向下遍历整棵组件树，重新尝试渲染所有相关的子组件。而state只关心每个组件自己内部的状态，这些状态只能在组件内部改变，把组件看成一个函数，那么它接受了props作为参数，内部由state作为函数的内部参数，返回一个Virtual DOM的实现。

组件的state
组件的state是组件的内部状态，state的变化最终将反映到组建UI的变化，我们在组件的构造方法constructor中通过this.state定义组件的初始状态，并通过this.setState方法改变组件状态（也是改变组件状态的唯一方式），进而组件的UI也会随之重新渲染。

</>复制代码 
1.setState是一个异步方法，一个生命周期内所有的setState方法会合并操作。

组件的props

</>复制代码 
1.React的单向数据流，主要的流动管道就是props，
props本身是不可变的。当我们试图改变props的原始值时，
React会报出类型错误警告，组件的props一定来自于默认属性或者通过父组件传递而来。
2.React为props同样提供了默认的配置。
通过defaultProps静态变量的方式来定义，当组件被调用的时候，默认值保证渲染后始终有值。
    static defaultProps = {
        classPrefix: "tabs",
        onChange: () => {}    
    }
    
3.proTotypes用于规范props的类型与必需的状态。
如果组件定义了propTypes，那么在开发环境下，就会对组件的props的值类型作检查。
    static propTypes = {
        classPrefix: propTypes.String
    }
    
4.子组件的props，在React中有一个重要且内置的props---children，
它代表组件的子组件集合，children可以根据传入子组件的数量来决定是否是数组类型。
5.用function prop与父组件通讯，
父组件可以通过子组件的prop传递给子组件一个回调函数，
子组件需要改变父组件数据时，调用这个回调函数即可。

React生命周期

组件从创建到被销毁的过程称为组件的生命周期。通常，React组件的生命周期可以被分为三个阶段：挂载阶段、更新阶段、卸载阶段

1.挂载阶段

</>复制代码 
constructor
这是es6 class的构造方法，组件被创建时，
会首先调用组件的构造方法，
这个构造方法接收一个props参数，props是父组件中传入的属性对象
componentWillMount
该方法在组件被挂载到DOM前调用，且只会被调用一次
render
这是定义组件时唯一必要的方法，该方法根据props和state返回一个react元素
，这个元素用于描述组件的UI，注意render并不负责组件的实际渲染工作，
它只是返回一个UI的描述，真正渲染出页面的DOM的工作有React负责。
componentDidMount 
组件被挂载到DOM后调用，且只会被调用一次

2.更新阶段

</>复制代码 
componentWillReceiveProps(nextProps)
这个方法只在props引起的组件更新过程中，才会被调用。
state引起的组件更新并不会触发该方法的执。
shouldComponentUpdate(nextProps, nextState)
这个方法决定组件是否继续执行更新过程，当方法返回true时（默认返回值），
组件会继续更新过程。返回false时，组件更新过程停止。
componentWillUpdate(nextProps, nextState)
该方法在组件render调用前调用。
render
该方法根据props和state返回一个react元素，如挂载阶段
componentDidUpdate(preProps, preState)
组件更新后被调用，可以作为操作DOM的地方。两个参数分别是组件更新前的props和state

3.卸载阶段

</>复制代码 
componentWillUnmount
组件被卸载之前调用，此处可以用于清除定时器等，取消监听事件等，避免引起内存泄露。

React refs

ref是react上的特殊属性
在常规的数据流之外强制修改子元素
被修改的可以是react组件实例，或者一个dom元素
可以在dom元素上和类组件上添加ref，react组件在加载时将dom元素传入ref的回调，在componentDidMount 或者componentDidUpdate 这些生命周期前执行。

1.dom元素上添加ref

</>复制代码 
...
handleClick(){
    this.nameInput.focus();
}
render(){
    return(
        
            {this.nameInput = input;}}
            
        
    );
}

2.react组件上添加ref

</>复制代码 
// App.js
otherFunction(){
    this.pager.changePage(5);
}
....
render(){
    return(
        {this.pager = page;}} />
    );
}
// Pager.js
...
changePage(page){
    this.setState({
        page : page
    });
}
...
// 在父组件中使用ref给某一子组件传值，并且子组件调用setState修改自身的状态，
// 该子组件会重新渲染一次，父组件中的其他组件不会重新render

3.ref和函数式组件

</>复制代码 
function MyTest(){
    let textInput = null;
    function handleClick(){
        textInput.focus();
    }
    return(){
        
            {textInput=input}/>
            
        
    }
}

子组件对父组件暴露dom节点
// App.js
...
render(){

</>复制代码 
return(
    _{this.inputRef = el; } />}
);

}

// Sub.js
...
render(){

</>复制代码 
return(){
    
        
    
}

}

React forceUpdate

默认情况下，当组件的 state 或 props 改变时，组件将重新渲染。如果你的 render() 方法依赖于一些其他数据，你可以告诉 React 组件需要通过调用 forceUpdate() 重新渲染。
调用 forceUpdate() 会导致组件跳过 shouldComponentUpdate() ，直接调用 render()。这将触发子组件的正常生命周期方法，包括每个子组件的 shouldComponentUpdate() 方法。
forceUpdate就是重新render。有些变量不在state上，但是你又想达到这个变量更新的时候，刷新render；或者state里的某个变量层次太深，更新的时候没有自动触发render。这些时候都可以手动调用forceUpdate自动触发render

</>复制代码 
// Sub.js
class Sub extends React.Component{
    construcotr(){
        super();
        this.name = "tom";
    }
    refChangeName(name){
        this.name = name;
        this.forceUpdate(); 
    }
    render(){
        return ({this.name}
);
    }
}
// App.js
class App extends React.Component{
    handleClick(){
        this.subRef.refChangeName("jack");
    }
    render(){
        return (
            _{{this.subRef = sub;}} />}
            
        );
    }
}

云服务器 GPU云服务器你知道你应该知道数据分析知道你百度一下你就知道了

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96600.html

关于React的一些小知识

摘要：关于的一些小知识这里搜集了几个关于的零散知识，有些虽然知道了也不一定能帮你写出更好的代码，但能够扩展一下知识。被设置为而不是是由于早期的会在某些情况下删除基本类型的属性。关于React的一些小知识这里搜集了几个关于react的零散知识，有些虽然知道了也不一定能帮你写出更好的代码，但能够扩展一下知识。以下全部来自于https://overreacted.io，需要更详细解释的可以去...

tuomao 2019-08-23 16:29 评论0 收藏0
玩转 React（一）- 前言

摘要：本人计划编写一个针对中初级前端开发者学习的系列教程玩转。使用的原因是新的语言规范开发效率更高代码更优雅，尤其是基于开发的项目。其次也是目前特别流行的一个前端框架，截止目前，上有将近万，国内一二线互联网公司都有深度依赖开发的项目。本人计划编写一个针对中初级前端开发者学习 React 的系列教程 - 《玩转 React》。文章更新频率：每周 1 ~ 2 篇。目录玩转 React（...

waltr 2019-08-21 16:43 评论0 收藏0
React 深入系列２：组件分类

摘要：无状态组件和有状态组件无状态组件和有状态组件，划分依据是根据组件内部是否维护。展示型组件和容器型组件展示型组件和容器型组件，划分依据是根据组件的职责。文：徐超，《React进阶之路》作者授权发布，转载请注明作者及出处 React 深入系列2：组件分类 React 深入系列，深入讲解了React中的重点概念、特性和模式等，旨在帮助大家加深对React的理解，以及在项目中更加灵活地使...

Karrdy 2019-08-22 16:05 评论0 收藏0
使用React 应当注意的几个地方

摘要：都会造成错误，注意一定一定严格的用，所以我建议直接复制我的。因为用的话他会转义代码，写不写其实一个样。不可避免的，构建肯定是要用到的。这个时候一般用的是在外面保存然后里面调用第二个坑更隐蔽。目标人群献给熟悉基础的React语法的刚接触React的同学~ 如果你已经写过半年以上的React那也不用看了，毕竟我水平并不高 Whats React React 是一个不存在的网络公司Fac...

高璐 2019-08-19 17:11 评论0 收藏0
typescript - 一种思维方式

摘要：怎么影响了我的思考方式对前端开发者来说，能强化了面向接口编程这一理念。使用的过程就是在加深理解的过程，确实面向接口编程天然和静态类型更为亲密。电影《降临》中有一个观点，语言会影响人的思维方式，对于前端工程师来说，使用 typescript 开发无疑就是在尝试换一种思维方式做事情。其实直到最近，我才开始系统的学习 typescript ，前后大概花了一个月左右的时间。在这之前，我也在...

CKJOKER 2019-08-23 17:05 评论0 收藏0