Comments (10)
Check this out: https://codesandbox.io/s/4z26pmkp87
not sure that it is safe to use
from react-powerplug.
No, you should not use SFC. Using SFC, it's safe, but it's slow.
Use Component instead.
export class Ref extends Component {
ref = React.createRef();
render() {
return this.props.children(this.ref);
}
}
And besides, another feature request:
export class Instance extends Component {
constructor(props) {
super(props);
props.init && props.init(this);
}
render() {
return this.props.children(this);
}
}
const list = [xxxx];
const to_render = <Instance init={ins => ins.audios = {}}>
{ins => <ul>
{list.map(item => <li key={item.id}>
<audio preload="none" src={item.url} ref={ele => ins.audios[item.id] = ele} />
<button onClick={e => ins.audios[item.id].play()}>play</button>
</li>)}
</ul>}
</Instance>
Instance
is not only a Multi Ref Component
, in fact, with it, we can do everything, like cache previous state, define lifecycles
...
from react-powerplug.
I'd say you should go with classes :) Component instance is bad abstraction because implementation detail is part of the api.
from react-powerplug.
@TrySound you are talking about Instance
component?
But to write a Component Class, I need to go out of JSX, write the class, then use it in JSX.
With Instance
component, I can just write it in JSX.
Why I think just write in JSX
is important?
Because write a class
is much harder than write a vnode
: well, write a class
is not hard, but compared to write a vnode
, you'll feel it much harder.
from react-powerplug.
I know it's hard, but mutable instance with methods as first class citizen is not the best api for immutable tree. Instance has a lot of stuff which is implementation detail in context of render prop. I would prefer to mutate state with values you need.
from react-powerplug.
But in some cases, we do really need mutable instance which won't cause a update when changing its state.
Well, without Instance
, how to make a Multi Ref Component
from react-powerplug.
Show me the case please
from react-powerplug.
Code in #126 (comment) showed the case.
Copy it here:
const list = [xxxx];
const to_render = <Instance init={ins => ins.audios = {}}>
{ins => <ul>
{list.map(item => <li key={item.id}>
<audio preload="none" src={item.url} ref={ele => ins.audios[item.id] = ele} />
<button onClick={e => ins.audios[item.id].play()}>play</button>
</li>)}
</ul>}
</Instance>
from react-powerplug.
It's okay to mutate state.
const list = [xxxx];
const to_render = (
<State initial={{ audios: {} }}>
{({ state }) => (
<ul>
{list.map(item => (
<li key={item.id}>
<audio preload="none" src={item.url} ref={ele => state.audios[item.id] = ele} />
<button onClick={e => state.audios[item.id].play()}>play</button>
</li>
)}
</ul>}
</State>
)
Or if you don't want to mutate state you may create mutable object on instance. Just don't pass instance with all its methods. Operate with data only here, mutable and immutable.
class Mutable extends React.Component {
mutable = this.props.initial;
render() {
return this.props.children(this.mutable)
}
}
from react-powerplug.
Well, it's a debate between two API offering philosophy: I offer these apis because I can
and I offer these apis because you just need them
.
In fact, I don't know which philosophy is better... -_-!!!!
Component Mutable
is OK.
Choose which one you feel comfortable. :)
from react-powerplug.
Related Issues (20)
- [Feature Request] <Tabs /> component for Tabs or Carousel. HOT 2
- Toggle documentation outdated HOT 1
- Warning: The prop `children` is marked as required HOT 1
- Currently is a pain to edit flow files in a project HOT 4
- Why are there no control props for the state management components? HOT 3
- Export flow type definitions HOT 6
- Upgrade typescript definition HOT 11
- react-powerplug breaking build after babel 7 upgrade HOT 16
- onMount={props => ...} HOT 2
- Bad English in README HOT 2
- State component - "onChange" question HOT 1
- RFC: ElementContainer HOT 3
- Latest should not point to a release candidate HOT 5
- `State` component implements `Value` component & not the other way around HOT 3
- Wrong types with Flow and react-composer and compose HOT 1
- [Feature Request] React hooks support. HOT 4
- Add access to browser events to feedback containers
- Changing state causes rerender that breaks animations
- Initial Hover state is wrong on load if cursor is over element
- Document site is broken, 404 Not Found HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-powerplug.