React Native 常用的技术

分类：React作者：编程之家用户

下一个项目公司也打算使用Reactnative.大致看了下原型设计,写几个小demo先试试水.特此记录下.

http://www.cnblogs.com/shaoting/p/7148240.html转载

1.微信及朋友圈分享.QQ及朋友圈分享,微博分享,微信支付,支付宝支付.

2.导航条渐隐

3.通讯录

4.卡片式轮播

5.时间轴

6.图片+列表的组合效果

7.图片下拉放大

8.原生视频播放器

9.react-navigation的使用和变更

10.倒计时

11.多张图片查看

12.自定义页面加载指示器

......

1.微信及朋友圈分享,微信支付:https://github.com/yorkie/react-native-wechat

QQ分享:https://github.com/reactnativecn/react-native-qq

微博分享:https://github.com/reactnativecn/react-native-weibo

支付宝支付没有找到,只能跳转原生进行支付.

大神刚出炉的React Native分享功能封装【一行代码，双平台分享】 支持平台：【QQ】【QQ空间】【微信】【朋友圈】【微博】 https://github.com/songxiaoliang/react-native-share

2.导航条渐隐,该项目我们打算使用react-navigation,但是该库的导航条使用不了渐隐,于是只能在需要导航条渐隐的地方,改用自己定义的导航条.

基本代码如下:

  1 /**
  2  * Created by shaotingzhou on 2017/5/9.
  3  */
  4 import React,{ Component } from 'react';
  5 import {
  6     AppRegistry,  7     StyleSheet,128); line-height:1.5!important">  8     Text,128); line-height:1.5!important">  9     View,128); line-height:1.5!important"> 10     Image,128); line-height:1.5!important"> 11     TouchableOpacity,128); line-height:1.5!important"> 12     Platform,128); line-height:1.5!important"> 13     Dimensions,128); line-height:1.5!important"> 14     RefreshControl,128); line-height:1.5!important"> 15     FlatList,128); line-height:1.5!important"> 16     ActivityIndicator,128); line-height:1.5!important"> 17     ScrollView,128); line-height:1.5!important"> 18     TextInput
 19 } from 'react-native';
 20 var {width,height} = Dimensions.get('window');
 21 var dataAry = []
 22 var start  = 0
 23 
 24 export default class OneDetailsFlat extends Component{
 25     //返回首页方法需要修改react-navigation库的源码.修改方法见:http://www.jianshu.com/p/2f575cc35780
 26     static navigationOptions = ({ navigation }) => ({
 27         header:null,128); line-height:1.5!important"> 28         title: 'FlatList',128); line-height:1.5!important"> 29         headerStyle:{backgroundColor:'rgba(255,255,0.0)'},128); line-height:1.5!important"> 30         headerTintColor: 'black',128); line-height:1.5!important"> 31         headerLeft:(
 32             <Text onPress={()=>navigation.goBack("Tab")}>返回首页</Text>
 33         ),128); line-height:1.5!important"> 34     })
 35 
 36      构造
 37     constructor(props) {
 38         super(props);
 39          初始状态
 40         for(start = 0;start<20;start++){
 41             var obj = {}
 42             obj.key = start
 43             dataAry.push(obj)
 44         }
 45 
 46         this.state = {
 47             opacity:0,128); line-height:1.5!important"> 48             dataAry: dataAry,128); line-height:1.5!important"> 50         };
 51     }
 52     render() {
 53         return (
 54             <View>
 55                 <FlatList
 56                     onScroll = {(e)=>{this.onScroll(e)}}
 57                     data = {this.state.dataAry}
 58                     renderItem = {(item) => this.renderRow(item)}
 59                 />
 60                 <View style={{width:width,height:69,alignItems:'center',flexDirection:'row',position:'absolute',top:0,backgroundColor:'rgba(122,233,111,' + this.state.opacity + ')'}}>
 61                     <Text style={{width:60,color:'red'}} onPress={()=>this.props.navigation.goBack(null)}>返回</Text>
 62                 </View>
 63             </View>
 64         );
 65     }
 66 
 67     listView的renderRow
 68     renderRow =(item) =>{
 69             return(
 70                 <View style={{flexDirection:'row',marginTop:5,marginLeft:5,borderWidth:1,marginRight:5,borderColor:'#DEDEDE',backgroundColor:'white'}}>
 71                     <Image source={require('../image/one_selected.png')} style={{width:60,height:60,borderRadius:30,marginBottom:5}}/>
 72                     <View style={{flexDirection:'column',justifyContent:'space-around',marginLeft:5}}>
 73                         <Text style={{fontSize:16}}>歌名: 彩虹彼岸</Text>
 74                         <View style={{flexDirection:'row'}}>
 75                             <Text style={{fontSize:14,color:'#BDBDBD'}}>歌手:虚拟歌姬</Text>
 76                             <Text style={{fontSize:14,color:'#BDBDBD',marginLeft:10}}>专辑:react native</Text>
 77                         </View>
 78                     </View>
 79                 </View>
 80             )
 81     }
 82     onScroll =(e) =>{
 83         let y = e.nativeEvent.contentOffset.y;
 84         if(y < 10 ){
 85             this.setState({
 86                 opacity:0
 87             })
 88         }else if( y <= 69 && y>= 10){
 89             console.log(y/100)
 90              91                 opacity:y/100
 92             })
 93         }else {
 94              95                 opacity:1
 96             })
 97          }
 98     }
 99 
100 };
101 
102 var styles = StyleSheet.create({
103     container: {
104         flex: 1,128); line-height:1.5!important">105         backgroundColor: '#F5FCFF',128); line-height:1.5!important">106     },128); line-height:1.5!important">107     welcome: {
108         fontSize: 20,128); line-height:1.5!important">109         textAlign: 'center',128); line-height:1.5!important">110         margin: 10,128); line-height:1.5!important">111     },128); line-height:1.5!important">112     instructions: {
113         textAlign: 'center',128); line-height:1.5!important">114         color: '#333333',128); line-height:1.5!important">115         marginBottom: 5,128); line-height:1.5!important">116     }
117 });

3.通讯录采用三方库即可满足.https://github.com/sunnylqm/react-native-alphabetlistview

4.卡片式轮播采用三方库即可满足.https://github.com/archriss/react-native-snap-carousel

5.时间轴效果. 该效果采用FlatList打造即可.

 
  
/**
 * Created by shaotingzhou on 2017/7/10.
 */
import React,{ Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    FlatList,
    Dimensions,
    Image
} from 'react-native';
var {width,height} = Dimensions.get('window');
var dataAry = []
import data from './data.json'
export default class TimerShaft extends Component {
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            dataAry: dataAry,
        };
    }

    render() {
        return (
            <View style={{marginTop:30}}>
            <FlatList
                data = {this.state.dataAry}
                renderItem = {(item) => this.renderRow(item)}
                keyExtractor={this.keyExtractor}
            />
            <View style={{width:1,height:height,backgroundColor:'red',left:50}}></View>
            </View>
        );
    }

    renderRow =(item) =>{
        if(item.item.text){
            return(
                <View style={{marginBottom:10,marginLeft:60}}>
                    <Text>{item.item.text}</Text>
                </View>
            )
        }else{
            return(
                <View style={{flexDirection:'row',marginBottom:10}}>
                    {/*左边*/}
                    <View style={{width:60,marginBottom:10}}>
                        <View style={{flexDirection:'row',alignItems:'center'}}>
                            <Text>{item.item.time}</Text>
                            <View style={{width:10,height:10,borderRadius:5,left:45}}></View>
                        </View>
                    </View>
                    {/*右边*/}
                    <View style={{backgroundColor:"#F2F2F2",width:width-70}} onLayout = {(event)=>this.onLayout(event)} >
                        <Text style={{}}>{item.item.content}</Text>
                        <View style={{flexDirection:'row',flexWrap:'wrap'}}>
                            {this.renderImg(item.item.image)}
                        </View>
                    </View>
                </View>
            )

        }



    }

    keyExtractor(item: Object,index: number) {
        return item.id
    }

    onLayout = (event)=>{
        console.log(event.nativeEvent.layout.height)
    }

    renderImg = (imgAry) =>{
        var renderAry = []
        for(var i = 0;i < imgAry.length; i++){
            if(imgAry.length == 1){
                renderAry.push(
                    <Image key={i} source={{uri:imgAry[0].url}} style={{width:200,height:200}}/>
                )
            }else if(imgAry.length == 2 || imgAry.length == 4){
                renderAry.push(
                    <Image key={i} source={{uri:imgAry[i].url}} style={{width:(width-70)*0.5-2,height:(width-70)*0.5-2,marginLeft:1,marginTop:1}}/>
                )
            }else {
                renderAry.push(
                    <Image key={i} source={{uri:imgAry[i].url}} style={{width:(width-70)/3-2,height:(width-70)/3-2,marginTop:1}}/>
                )
            }
        }

        return renderAry
    }

    componentDidMount() {
        this.setState({
            dataAry:data
        })
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#F5FCFF',
    },
    welcome: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
    instructions: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
});
 
  
 
  
 
    这个是数据:
 
 
 
   
 
 
 
 　　
 
 
 该效果采用ScrollView包含两个FlatList和一个ListView完成(ps:第三个横向的cell的单独使用FlatList可以,但是和其他组件搭配就错误.....)
 
 
 * Created by shaotingzhou on 2017/7/6.
  4   5  * Sample React Native App
  6  * https://github.com/facebook/react-native
  7  * @flow
  8    9 
 10 import React,128); line-height:1.5!important"> 11 import {
 12     AppRegistry,128); line-height:1.5!important"> 13     StyleSheet,128); line-height:1.5!important"> 14     Text,128); line-height:1.5!important"> 15     View,128); line-height:1.5!important"> 16     ScrollView,128); line-height:1.5!important"> 17     Dimensions,128); line-height:1.5!important"> 18     FlatList,128); line-height:1.5!important"> 19     SectionList,128); line-height:1.5!important"> 20     Image,128); line-height:1.5!important"> 21     ListView
 22 } from 'react-native';
 23  24  25 var dataAryOne = []
 26 var dataAryTwo = []
 27 var ds = new ListView.DataSource({rowHasChanged:(r1,r2)=> r1 !== r2});
 28 
 29 export default class Main extends Component {
 30      31     constructor(props) {
 32         super(props);
 33          34         for(var i = 0;i<100;i++){
 35              36             obj.key = i
 37             dataAry.push(obj)
 38         }
 39 
 41         var i = 0;i<10;i++){
 42              43             obj.key = i
 44             dataAryOne.push(obj)
 45         }
 46 
 47          48         var i = 0;i<5;i++){
 49              50             obj.key = i
 51             dataAryTwo.push(obj)
 52         }
 53 
 54          55             index:1,128); line-height:1.5!important"> 56             dataAry: dataAry,128); line-height:1.5!important"> 57             dataAryOne:dataAryOne,128); line-height:1.5!important"> 58             dataSource:ds.cloneWithRows(dataAryTwo)
 59         };
 60     }
 61 
 62     render() {
 63          64             <View style={{flex:1}}>
 65                 <View style={{backgroundColor:'cyan',justifyContent:'center',alignItems:'center'}}>
 66                     <Text>导航条</Text>
 67                 </View>
 68                 <ScrollView
 69                     style={{flex:1}}
 70                     stickyHeaderIndices = {[1]}
 71                 >
 72 
 73                     <Image source={require('./1.gif')} style={{width:width,height:200}} />
 74 
 75                     <View style={{backgroundColor:'yellow'}}>
 76                         <View style={{flexDirection:'row',marginTop:20}}>
 77                             <Text onPress={()=>{this.onClickOne()}} style={{color:this.state.index == 1 ? 'red' : 'cyan'}}>11111</Text>
 78                             <Text onPress={()=>{this.onClickTwo()}} style={{color:this.state.index == 2 ? 'red' : 'cyan'}}>22222</Text>
 79                             <Text onPress={()=>{this.onClickThree()}} style={{color:this.state.index == 3 ? 'red' : 'cyan'}}>33333</Text>
 80                         </View>
 81                     </View>
 82 
 83                     {this.bottomViewRender()}
 84 
 85                 </ScrollView>
 86 
 87             </View>
 88         );
 89     }
 90     bottomViewRender = ()=>{
 91         if(this.state.index == 1){
 92              93                 <FlatList
 94                     data = { 95                     renderItem = {(item) =>  96                 />
 97             )
 98         }this.state.index == 2){
 99             100                 <FlatList
101                     data = {this.state.dataAryOne}
102                     renderItem = {(item) => this.renderRowOne(item)}
103                 />
104             )
105         }106             这里横向只能使用ListView或者SctionList.FLatList设置横向属性报错
107             108                 <ListView
109                     dataSource={this.state.dataSource}
110                     renderRow={this.renderRowTwo}
111                     contentContainerStyle={styles.listViewStyle}
112                 />
113             )
114         }
115 
117 
118 
119     onClickOne =()=>{
120         121             index:1,128); line-height:1.5!important">122         })
123     }
124     onClickTwo =()=>{
125         126             index:2,128); line-height:1.5!important">127         })
128     }
129     onClickThree =()=>{
130         131             index:3,128); line-height:1.5!important">132         })
133     }
134 
135 
136     renderRow =(item) =>{
137         138             <View style={{flexDirection:'row',128); line-height:1.5!important">139                 <View style={{flexDirection:'column',128); line-height:1.5!important">140                     <Text style={{fontSize:16}}>歌名: 彩虹彼岸</Text>
141                     <View style={{flexDirection:'row'}}>
142                         <Text style={{fontSize:14,128); line-height:1.5!important">143                         <Text style={{fontSize:14,128); line-height:1.5!important">144                     </View>
145                 </View>
146             </View>
147         )
148 
149     }
150 
151     renderRowOne =(item) =>{
152         153             <View style={{flexDirection:'row',128); line-height:1.5!important">154                 <View style={{flexDirection:'row'}}>
155                     <Text style={{fontSize:14,128); line-height:1.5!important">156                     <Text style={{fontSize:14,128); line-height:1.5!important">157                 </View>
158             </View>
159         )
160 
161     }
162 
163     renderRowTwo(rowData){
164         165                 <View style={styles.innerViewStyle}>
166                     <Image source={require('./2.jpeg')} style={{width:150,height:150}} />
167                     <Text>你的名字</Text>
168                 </View>
169         );
170     }
171     //
172      renderRowTwo =(item) =>{
173     174          return (
175              <View>
176                  {
177                      dataAryTwo.map(function (item,i) {
178                      return (
179                          <View style={{marginLeft:5}} key={i}>
180                              <Image source={require('./2.jpeg')} style={{width:150,height:150}} />
181                              <Text>你的名字</Text>
182                          </View>
183                      );
184                  })
185                  }
186              </View>
187          )
188      }
189 
190 
191 }
192 
193 const styles = StyleSheet.create({
194     container: {
195         flex: 1,128); line-height:1.5!important">196         justifyContent: 'center',128); line-height:1.5!important">197         alignItems: 'center',128); line-height:1.5!important">198         backgroundColor: '#F5FCFF',128); line-height:1.5!important">199     },128); line-height:1.5!important">200     welcome: {
201         fontSize: 20,128); line-height:1.5!important">202         textAlign: 'center',128); line-height:1.5!important">203         margin: 10,128); line-height:1.5!important">204     },128); line-height:1.5!important">205     instructions: {
206         textAlign: 'center',128); line-height:1.5!important">207         color: '#333333',128); line-height:1.5!important">208         marginBottom: 5,128); line-height:1.5!important">209     },128); line-height:1.5!important">210     listViewStyle:{
211         改变主轴方向
212         flexDirection:'row',128); line-height:1.5!important">213         多行显示
214         flexWrap:'wrap'
215     },128); line-height:1.5!important">216 }); 
  
 
    7.图片上拉放大:https://github.com/lelandrichardson/react-native-parallax-view
 
 
 8.原生视频播放器:https://github.com/cornedor/react-native-video-player
 
 
 9.react-navigation的使用和变更:
 
 
 使用介绍: http://www.jianshu.com/p/2f575cc35780
 
 
 demo:https://github.com/pheromone/navigationDemo
 
 
 在使用react-navigation中遇到几个难点:
 
  
 
 10.倒计时:https://github.com/kkkelicheng/ReactNative-CountDownButton
 
 
 优点: 不会因为进入后台而停止读秒
 
 
     支持同个页面再次进入时，智能的判断读秒时间，显示是否继续计时
 
 
 11.多张图片查看:https://github.com/ascoders/react-native-image-viewer
 
 
 12.因为下个项目是有关狗狗的,页面加载需要一个指示器.在不考虑性能上暂时使用gif图+Modal实现.
 
 
 
  
 
   
 
    
 
      
      
 
        
        

          1 
        
 
        

          2 
        
 
        

          3 
        
 
        

          4 
        
 
        

          5 
        
 
        

          6 
        
 
        

          7 
        
 
        

          8 
        
 
        

          9 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 
        

          25 
        
 
        

          26 
        
 
        

          27 
        
 
        

          28 
        
 
        

          29 
        
 
        

          30 
        
 
        

          31 
        
 
        

          32 
        
 
        

          33 
        
 
        

          34 
        
 
        

          35 
        
 
        

          36 
        
 
        

          37 
        
 
        

          38 
        
 
        

          39 
        
 
        

          40 
        
 
        

          41 
        
 
        

          42 
        
 
        

          43 
        
 
        

          44 
        
 
        

          45 
        
 
        

          46 
        
 
        

          47 
        
 
        

          48 
        
 
        

          49 
        
 
        

          50 
        
 
        

          51 
        
 
        

          52 
        
 
        

          53 
        
 
        

          54 
        
 
        

          55 
        
 
        

          56 
        
 
        

          57 
        
 
        

          58 
        
 
        

          59 
        
 
        

          60 
        
 
        

          61 
        
 
        

          62 
        
 
        

          63 
        
 
        

          64 
        
 
        

          65 
        
 
        

          66 
        
 
        

          67 
        
 
        

          68 
        
 
        

          69 
        
 
        

          70 
        
 
        

          71 
        
 
        

          72 
        
 
        

          73 
        
 
        

          74 
        
 
        

          75 
        
 
        

          76 
        
 
        

          77 
        
 
        

          78 
        
 
        

          79 
        
 
        

          80 
        
 
        

          81 
        
 
        

          82 
        
 		 
        
        
 
         
 
          /** 
         
 
         
 
           
          * Sample React Native App 
         
 
         
 
          * https://github.com/facebook/react-native 
         
 
         
 
          * @flow 
         
 
         
 
          */ 
         
 
         

            
         
 
         
 
          import 
          React,{ Component } from 
          'react' 
          ; 
         
 
         
 
          { 
         
 
         
 
           
          AppRegistry, 
         
 
         
 
          StyleSheet, 
         
 
         
 
          Text, 
         
 
         
 
          View, 
         
 
         
 
          Modal, 
         
 
         
 
          Image, 
         
 
         
 
          Dimensions 
         
 
         
 
          } from 
          'react-native' 
          ; 
         
 
         
 
          var 
          {width,height} = Dimensions.get( 
          'window' 
          ); 
         
 
         

            
         
 
         
 
          export 
          default 
          class 
          model 
          extends 
          Component { 
         
 
         
 
          // 构造 
         
 
         
 
          constructor(props) { 
         
 
         
 
           
          super 
          (props); 
         
 
         
 
          // 初始状态 
         
 
         
 
          this 
          .state = { 
         
 
         
 
          visible: 
          true 
         
 
         
 
          }; 
         
 
         
 
          } 
         
 
         
 
          render() { 
         
 
         
 
          return 
          ( 
         
 
         
 
          <View> 
         
 
         
 
          <Modal 
         
 
         
 
          visible={ 
          .state.visible} 
          // 根据isModal决定是否显示 
         
 
         
 
          > 
         
 
         
 
          <View style={{backgroundColor: 
          'rgba(0,0.4)' 
          ,width:width,justifyContent: 
          'center' 
          }}> 
         
 
         
 
          <Image source={require( 
          './food.gif' 
          )} style={{width:120,height:120,borderRadius:5}}/> 
         
 
         
 
          <Text style={{color: 
          'white' 
          }}>狗生思考中...</Text> 
         
 
         
 
          </View> 
         
 
         
 
          </Modal> 
         
 
         
 
          </View> 
         
 
         
 
          ); 
         
 
         
 
          } 
         
 
         

            
         
 
         

            
         
 
         
 
          componentDidMount() { 
         
 
         
 
          //模拟请求数据,请求OK,把visible置为false即可 
         
 
         
 
          .timer = setTimeout( 
         
 
         
 
          () => { 
         
 
         
 
          .setState({ 
         
 
         
 
          false 
         
 
         
 
          }) 
         
 
         
 
          }, 
         
 
         
 
          1000 
         
 
         
 
          ); 
         
 
         
 
          } 
         
 
         

            
         
 
         

            
         
 
         
 
          componentWillUnmount() { 
         
 
         
 
          .timer && clearTimeout( 
          .timer); 
         
 
         
 
          } 
         
 
         

            
         
 
         
 
          } 
         
 
         

            
         
 
         
 
          const styles = StyleSheet.create({ 
         
 
         
 
          container: { 
         
 
         
 
          flex: 1, 
         
 
         
 
          justifyContent: 
           
          alignItems: 
           
          backgroundColor: 
          '#F5FCFF' 
           
           
          welcome: { 
         
 
         
 
          fontSize: 20, 
         
 
         
 
          textAlign: 
           
          margin: 10, 
         
 
         
 
           
          instructions: { 
         
 
         
 
           
          color: 
          '#333333' 
           
          marginBottom: 5, 
         
 
         
 
           
          }); 
         
 
         

            
         
 
         
 
          AppRegistry.registerComponent( 
          'model' 
           其中,关于Android下使用gif图需要简单配置下,请查看http://www.cnblogs.com/shaoting/p/5934725.html的第25条内容.
 

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

                            

                    
                
                

                    

                        

                            
相关推荐

                            



                                
react 学习11高阶组件

                                
react 中的高阶组件主要是对于 hooks 之前的类组件来说的，如果组件之中有复用的代码，需要重新创建一个父类，父类中存储公共代码，返回子类，同时把公用属性...

                            

                                
react 学习(四) 批量更新及合成事件

                                
我们上一节了解了组件的更新机制，但是只是停留在表层上，例如我们的 setState 函数式同步执行的，我们的事件处理直接绑定在了 dom 元素上，这些都跟 re...

                            

                                
react 学习(二) 实现类和函数式组件

                                
我们上一节了解了 react 的虚拟 dom 的格式，如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层，一个是调...

                            

                                
react 学习12实现 cloneElement

                                
react 本身提供了克隆组件的方法，但是平时开发中可能很少使用，可能是不了解。我公司的项目就没有使用，但是在很多三方库中都有使用。本小节我们来学习下如果使用该...

                            

                                
实现简版 react 状态管理器 mobx

                                
mobx 是一个简单可扩展的状态管理库，中文官网链接。小编在接触 react 就一直使用 mobx 库，上手简单不复杂。

                            

                                
mini react-window(一) 实现固定高度虚拟滚动

                                
我们在平常的开发中不可避免的会有很多列表渲染逻辑，在 pc 端可以使用分页进行渲染数限制，在移动端可以使用下拉加载更多。但是对于大量的列表渲染，特别像有实时数据...

                            

                                
react 学习(六) 函数组件实例及类组件生命周期

                                
本小节开始前，我们先答复下一个同学的问题。上一小节发布后，有小伙伴后台来信问到：‘小编你只讲了类组件中怎么使用 ref，那在函数式组件中怎么使用呢？’。确实我们...

                            

                                
mini react-window(二) 实现可知变化高度虚拟列表

                                
上一小节我们了解了固定高度的滚动列表实现，因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到，这种场景也适合我们常见的大部分场景，例如...

                            

                                
react 学习(五) 完善 setState 及实现 ref

                                
上一小节我们处理了 setState 的批量更新机制，但是我们有两个遗漏点，一个是源码中的 setState 可以传入函数，同时 setState 可以传入第二...

                            

                                
react 学习13实现 PureComponent

                                
我们知道 react 进行页面渲染或者刷新的时候，会从根节点到子节点全部执行一遍，即使子组件中没有状态的改变，也会执行。这就造成了性能不必要的浪费。之前我们了解...

                            

                                
react学习(十) React 中的 context

                                
在平时工作中的某些场景下，你可能想在整个组件树中传递数据，但却不想手动地通过 props 属性在每一层传递属性，contextAPI 应用而生。

                            

                                
react 学习(一) 实现简版虚拟 dom 和挂载

                                
楼主最近入职新单位了，恰好新单位使用的技术栈是 react，因为之前一直进行的是 vue2/vue3 和小程序开发，对于这些技术栈实现机制也有一些了解，最少面试...

                            

                                
react 学习(三) 组件更新

                                
我们上一节了了解了函数式组件和类组件的处理方式，本质就是处理基于 babel 处理后的 type 类型，最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...

                            

                                
react学习(八) diff 算法实现

                                
前面几节我们学习了解了 react 的渲染机制和生命周期，本节我们正式进入基本面试必考的核心地带 -- diff 算法，了解如何优化和复用 dom 操作的，还有...

                            

                                
react学习(九) React 新的生命周期

                                
我们在之前已经学习过 react 生命周期，但是在 16 版本中 will 类的生命周期进行了废除，虽然依然可以用，但是需要加上 UNSAFE 开头，表示是不安...

                            

                                
react 学习14实现 React.memo

                                
上一小节我们学习了 react 中类组件的优化方式，对于 hooks 为主流的函数式编程，react 也提供了优化方式 memo 方法，本小节我们来了解下它的用...

                            

                                
细聊Concent & Recoil , 探索react数据流的新开发模式

                                
开源不易，感谢你的支持，❤ star me if you like concent ^_^

                            

                                
使用hel-micro制作远程antd、tdesign-react

                                
hel-micro，模块联邦sdk化，免构建、热更新、工具链无关的微模块方案 ，欢迎关注与了解

                            

                                
setup vs 5 react hooks,助你避开"沟"中陷阱

                                
本文主题围绕concent的setup和react的五把钩子来展开，既然提到了setup就离不开composition api这个关键词，准确的说setup是由...

                            

                                
setState 同步 与异步

                                
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom

                            

                    



            
            

              
          

            

              




              

            

          

          
          

            

              

                  
    
              

            

          

          

            

              

                  
    
              

            

          

          
          

            

              

                
                
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot