【React】633- 使用 Hooks 优化 React 组件

import React from 'react';export default class extends React.Component {  state = {newsData: [], adData: []};  constructor() { this.getNewsData(); }  getNewsData() {    const newsData = [...];    this.setState({newsData});    this.getAdData(newsData.length / 2); //根据新闻数和插入规则换算广告请求数  }  getAdData() {    const adData = [...];    this.setState({adData});  }  render() {    const {newsData, adData} = this.state;    const comps = [];    for(let i = 0; i < newsData.length; i++) {      // 根据插入规则判断当前新闻卡片后是否要插入广告      comps.push(<NewsCard {...newsData[i]} key={`news-${i}`} />);      if(i % 2) { comps.push(<AdCard {...adData[i/2]} key={`ad-${i}`} />); }    }    return (<div>{comps}</div>);  }}
class AdCard extends React.Component {  componentDidMount() {    observe(this.dom, () => {});  }  onClick = () => {};  onMouseUp = () => {};  onMouseDown = () => {};
  getDOM = dom => this.dom = dom;  render() {    return <div      ref={this.getDOM}      onMouseUp={this.onMouseUp}      onMouseDown={this.onMouseDown}      onClick={this.onClick}    >{this.props.title}</div>  }}

<Modal>  <Modal.Title>Modal Title</Modal.Title>  <Modal.Content>Modal Content</Modal.Content>  <Modal.Footer> <button>OK</button> </Modal.Footer></Modal>

export default function(props) {  return React.Children.map(props.children, child =>    React.cloneElement(child, {onClick() { console.log('click') }}  ));}
<Select>  <Option>Click Me!</Option>  <Option>Click Me!</Option></Select>

class NewsList extends React.Component {  state = {newsData: [], adData: []};  constructor() { this.getNewsData(); }  getNewsData() { this.getAdData(newsData.length / 2) }  getAdData() {}  render() { return <List news={this.state.newsData} ad={this.state.adData} /> }}
function List({news, ad}) {  const {newsData, adData} = this.state;  const comps = [];  for(let i = 0; i < newsData.length; i++) {    comps.push(<NewsCard {...newsData[i]} key={`news-${i}`} />);    if(i % 2) { comps.push(<AdCard {...adData[i/2]} key={`ad-${i}`} />); }  }  return (<div>{comps}</div>);}

class NewsList extends React.Component {  state = {newsData: [], adData: []};  constructor() { this.getNewsData(); }  getNewsData() { this.getAdData(newsData.length / 2) }  getAdData() {}  render() { return this.props.render(this.state) }}function List({news, ad}) {  const {newsData, adData} = this.state;  const comps = [];  for(let i = 0; i < newsData.length; i++) {    comps.push(<NewsCard {...newsData[i]} key={`news-${i}`} />);    if(i % 2) { comps.push(<AdCard {...adData[i/2]} key={`ad-${i}`} />); }  }  return (<div>{comps}</div>);}
<NewsList render={({newsData, adData}) => <List news={newsData} ad={adData} />

function withNews(Comp) {  return class extends React.Component {    state = {newsData: []};    constructor() { this.getNewsData(); }    render() { return <Comp {...this.props} news={this.state.newsData} /> }  }}function withAd(Comp) {  return class extends React.Component {    state = {adData: []};    componentWillReceiveProps(nextProps) {      if(this.props.news.length) { this.getAdData(); }    }    render() { return <Comp {...this.props} ad={this.state.adData} /> }  }}const ListWithNewsAndAd = withAd(withNews(List));

import React from 'react';import Mediav from '@q/mediav';export default class extends React.Component {  state = {newsData: []};  constructor() { this.getNewsData(); }  render() {    const comps = [];    for(let i = 0; i < newsData.length; i++) {      comps.push(<NewsCard {...newsData[i]} key={`news-${i}`} />);      if(i % 2) { comps.push(<AdCard key={`ad-${i}`} />); }    }    return (<Mediav.Provider id="xxx">{comps}</Mediav.Provider>);  }}class AdCard extends Mediav.Item {  render() {    if(!this.props.type) { return null; }    const {title} = this.props;    return (<div ref={this.getDOM} onClick={this.onClick}      onMouseUp={this.onMouseUp} onMouseDown={this.onMouseDown}    >{title}</div>);  }}

const {useState, useEffect} = React;
function App() {  const [count, setCount] = useState(0);  useEffect(() => {    const interval = setInterval(() => setCount(count + 1), 1000);    return () => clearInterval(interval);  });
  return <span>{count}</span>;}
ReactDOM.render(<App />, document.getElementById('app'));

class User extends React.Component {  state = {    user: {}  }
  constructor(...args) {    super(...args);    const {name} = this.props;    this.getUserInfo(name)  }
  componentWillReceiveProps(nextProps) {    if(this.props.name === nextProps.name) {      return;    }    this.getUserInfo(nextProps.name);  }
  async getUserInfo(name) {    const user = await fetch(url, {name});    this.setState({user});  }
  render() {    return <div>{this.state.user.name}</div>  }}

function useUserInfo(name) {  const [user, setUser] = useState({});  useEffect(() => {    fetch(url, {name}).then(user => setUser(user));  }, [name]);  return user;}
function User({name}) {  const user = useUserInfo(name);  return <div>{user.name}</div>}

import {useState, useEffect, useRef} from 'react';import {useFetchMediav, useMediavEvent} from '@q/mediav';
function App() {  const [newsData, setNewsData] = useState([]);  const [adData] = useFetchMediav({id: "xxx", length: newsData.length / 2});  useEffect(() => {    const newsData = [...];    setNewsData(newsData);  }, []);
  const comps = [];  for(let i = 0; i < newsData.length; i++) {    comps.push(<NewsCard {...newsData[i]} key={`news-${i}`} />);    if(i % 2) { comps.push(<AdCard data={adData[Math.floor(i/2)]} key={`ad-${i}`} />); }  }  return (<div>{comp}</div>);}
function AdCard({data}) {  const ref = useRef(null);  const bind = useMediavEvent(ref, data);  return (<div className="gg" ref={ref} {...bind}>{data.title}</div>);}