ReactJS 设计模式：编写健壮且可扩展的组件

// presentational component: displaying user list (userlist.js)
import react from 'react';

const userlist = ({ users }) => (
  <ul>
    {users.map((user) => (
      <li key={user.id}>{user.name}</li>
    ))}
  </ul>
);

export default userlist;

// container component: fetching user data (usercontainer.js)
import react, { usestate, useeffect } from 'react';
import userlist from './userlist';

const usercontainer = () => {
  const [users, setusers] = usestate([]);

  useeffect(() => {
    const fetchusers = async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/users');
      const data = await response.json();
      setusers(data);
    };
    fetchusers();
  }, []);

  return <userlist users={users} />;
};

export default usercontainer;

// withauthorization.js (hoc for authorization)
import react from 'react';

const withauthorization = (wrappedcomponent) => {
  return class extends react.component {
    componentdidmount() {
      if (!localstorage.getitem('authtoken')) {
        // redirect to login if not authenticated
        window.location.href = '/login';
      }
    }

    render() {
      return <wrappedcomponent {...this.props} />;
    }
  };
};

export default withauthorization;

// dashboard.js (component wrapped with hoc)
import react from 'react';
import withauthorization from './withauthorization';

const dashboard = () => <h1>welcome to the dashboard</h1>;

export default withauthorization(dashboard);

// mousetracker.js (component with render props)
import react, { usestate } from 'react';

const mousetracker = ({ render }) => {
  const [position, setposition] = usestate({ x: 0, y: 0 });

  const handlemousemove = (event) => {
    setposition({ x: event.clientx, y: event.clienty });
  };

  return <div onmousemove={handlemousemove}>{render(position)}</div>;
};

export default mousetracker;

// app.js (using render props)
import react from 'react';
import mousetracker from './mousetracker';

const app = () => (
  <mousetracker
    render={({ x, y }) => (
      <h1>
        mouse position: ({x}, {y})
      </h1>
    )}
  />
);

export default app;

// usefetch.js (custom hook)
import { usestate, useeffect } from 'react';

const usefetch = (url) => {
  const [data, setdata] = usestate(null);
  const [loading, setloading] = usestate(true);

  useeffect(() => {
    const fetchdata = async () => {
      const response = await fetch(url);
      const result = await response.json();
      setdata(result);
      setloading(false);
    };
    fetchdata();
  }, [url]);

  return { data, loading };
};

export default usefetch;

// app.js (using the custom hook)
import react from 'react';
import usefetch from './usefetch';

const app = () => {
  const { data, loading } = usefetch('https://jsonplaceholder.typicode.com/posts');

  if (loading) return <div>loading...</div>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default app;

// tabs.js (parent component)
import react, { usestate } from 'react';

const tabs = ({ children }) => {
  const [activeindex, setactiveindex] = usestate(0);

  return react.children.map(children, (child, index) =>
    react.cloneelement(child, { isactive: index === activeindex, setactiveindex, index })
  );
};

const tab = ({ children, isactive, setactiveindex, index }) => (
  <button onclick={() => setactiveindex(index)}>{children}</button>
);

const tabpanel = ({ children, isactive }) => (isactive ? <div>{children}</div> : null);

tabs.tab = tab;
tabs.tabpanel = tabpanel;

export default tabs;

// app.js (using compound components)
import react from 'react';
import tabs from './tabs';

const app = () => (
  <tabs>
    <tabs.tab>tab 1</tabs.tab>
    <tabs.tab>tab 2</tabs.tab>
    <tabs.tabpanel>content for tab 1</tabs.tabpanel>
    <tabs.tabpanel>content for tab 2</tabs.tabpanel>
  </tabs>
);

export default app;

// controlled component (textinputcontrolled.js)
import react, { usestate } from 'react';

const textinputcontrolled = () => {
  const [value, setvalue] = usestate('');

  return (
    <input type="text" value={value} onchange={(e) => setvalue(e.target.value)} />
  );
};

export default textinputcontrolled;

// uncontrolled component (textinputuncontrolled.js)
import react, { useref } from 'react';

const textinputuncontrolled = () => {
  const inputref = useref();

  const handleclick = () => {
    console.log(inputref.current.value);
  };

  return (
    <>
      <input type="text" ref={inputref} />
      <button onclick={handleclick}>log input value</button>
    </>
  );
};

export default textinputuncontrolled;

// usedynamicstate.js (hook factory)
import { usestate } from 'react';

const usedynamicstate = (initialstates) => {
  const states = {};
  const setters = {};

  initialstates.foreach(([key, initialvalue]) => {
    const [state, setstate] = usestate(initialvalue);
    states[key] = state;
    setters[key] = setstate;
  });

  return [states, setters];
};

export default usedynamicstate;

// App.js (Using the Hooks Factory)
import React from 'react';
import useDynamicState from './useDynamicState';

const App = () => {
  const [states, setters] = useDynamicState([
    ['name', ''],
    ['age', 0],
  ]);

  return (
    <div>
      <input
        type="text"
        value={states.name}
        onChange={(e) => setters

.name(e.target.value)}
      />
      <input
        type="number"
        value={states.age}
        onChange={(e) => setters.age(parseInt(e.target.value))}
      />
      <p>Name: {states.name}</p>
      <p>Age: {states.age}</p>
    </div>
  );
};

export default App;