React技术总结

目录

1. 关于框架-最新版2020

1.1 配置：CSS模块

1.2 UI样式框架

1.2.1 antd

 1.3 关于请求

    1.3.1 请求方式：         传送门：Fetch/zlFetch 

init 综合资料总结

init.1 资料：仅仅是参考记录，写作规范，无其他功能意义

---

---

1. 关于框架-最新版2020

1.1 配置：CSS模块

相关网站：

众说纷纭

使用babel-plugin-react-css-modules简化CSS Modules的使用

1.2 UI样式框架

1.2.1 antd

react使用antd警告:Warning: findDOMNode is...

警告原因：

是因为 react 中的严格模式: StrictMode

解决办法:

(这是目前找到的唯一办法 _)
在index.js中挂载 App 的外面有这样一个标签
只要把这个标签删除掉就可以

 1.3 关于请求

    1.3.1 请求方式：
         传送门：Fetch/zlFetch 

 

init 综合资料总结

init.1 资料：仅仅是参考记录，写作规范，无其他功能意义

//css


className="m_article list-item special_section clearfix"

//js
import React from 'react';
import { Card } from 'antd';
import { Router, Route, Link, browserHistory } from 'react-dom';

import carousel4 from './../images/carousel_4.jpg';

export default class PCNewsBlock extends React.Component {
constructor() {
      super();
      this.state = {
	news: [{},{},{}]
      }
};
//初始化 加载请求
componentWillMount() {
      var myFetchOptione = {
         method: 'GET'
      };
      const url = 'http://v.juhe.cn/toutiao/index?type=' + this.props.type + '&key=7f6252fe6d8f154907566dcf2afd3922' + '&count=' + this.props.count';
      fetch(url, myFetchOptione).then(response => response.json()).then(json =>
         this.setState({ news: json })
      );
};
//html
render() {
   const { news } = this.state;
   const styleImage = {
      dispaly: "block",
      width: this.props.imageWidth,
      height: "90px"
   };
   const newsList = news.length ? news.map((newsItem, index) => {
      return 

         
            

               
               
            
            

               
{newsItem.title}
               
{newsItem.author_name}
            
         
      
   }) : '没有加载到任何新闻信息';

   

      {newsList}
   
};
}

//引入组件
import PCNewsBlock from './pc_news_block';


浏览器打开F12:Rendering:右边菜单栏 -> 多选 -> More tools 数据变动情况