I want to use PureRenderMixin optimize performance through shouldComponentUpdate,
but after npm i react-addons-pure-render-mixin --save, I find that I can't call PureRenderMixin correctly.
I follow react document ES6 step.
import PureRenderMixin from 'react-addons-pure-render-mixin';
class FooComponent extends React.Component {
constructor(props) {
super(props);
this.shouldComponentUpdate = PureRenderMixin.shouldComponentUpdate.bind(this);
}
}
And always get Unable to resolve module react-addons-pure-render-mixin error.
Is there any possible use PureRenderMixin in react native? If so, how should I fix it?
You may need import reactMixin from 'react-mixin'; The whole solution would be something like:
import React, { Component } from 'react';
import { View } from 'react-native';
import reactMixin from 'react-mixin';
import PureRenderMixin from 'react-addons-pure-render-mixin';
import Styles from './styles';
export default class Loading extends Component {
render() {
return (
<View style={Styles.container}>
<Text>Hello world!!!</Text>
</View>
);
}
}
reactMixin(Loading.prototype, PureRenderMixin);
Related
Below is a screen shot of my package size from Next JS. What I want to point out is the react-color components under node_modules. I am importing them this way:
import { GithubPickerProps, GithubPicker, AlphaPicker } from 'react-color';
But you see it includes all the things I'm not using such as photoshop.js, sketch.js, etc.
How do I get it not to bundle the things I'm not using with tree shaking?
I did notice that import { debounce } from 'lodash'; imported all of lodash but import debounce from 'lodash/debounce'; reduced the package size by 200kB.
In order for the tree-shaking to work properly react-color should add module property to the package.json which will point to esm version of the lib.
Since it doesn't have it, you will need import directly.
Before:
import React from 'react'
import SketchPicker from 'react-color'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
After:
import React from 'react'
import SketchPicker from 'react-color/lib/Sketch'
class Component extends React.Component {
render() {
return <SketchPicker />
}
}
I'm trying to import the svg from the public folder.
How can I do that using import?
I've tried:
import Avatar_1 from './public/avatar_1.svg';
but I'm still getting "Module not found: Can't resolve './public/avatar_1.svg'"
Is there a way to use process.env.PUBLIC_URL?
I think it's not possible to access the public folder from src, so I did the following:
import { ReactComponent as Avatar1 } from './assets/avatar_1.svg';
and it worked.
How to use it:
<Avatar1 />
Please note that the ReactComponent as part of the import is mandatory, and that your new component name, like Avatar1, should always start with a capital letter. Otherwise react won't recognize this as a react component.
Create 'icons' folder in Public Directory and Use this code :
import React, { Component } from 'react';
const iconPath = process.env.PUBLIC_URL + '/icons/';
export default class TestComponent extends Component {
constructor(props) {
super(props);
}
render(){
return (<img
src={`${iconPath}icon-arrow.svg`}
alt="more"
/>)
}
}
I've been following the complete react native and redux guide on Udemy and there is this part where despite following down to a tee. My LibraryList component still gets called twice.
What could be the problem?
LibraryList.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class LibraryList extends Component {
render() {
console.log(this.props);
return;
}
}
function mapStateToProps(state) {
return {
libraries: state.libraries
};
}
export default connect(mapStateToProps)(LibraryList);
App.js
import React from 'react';
import { View } from 'react-native';
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import reducers from './reducers';
import { Header } from './components/common';
import LibraryList from './components/LibraryList';
const App = () => {
return (
<Provider store={createStore(reducers)}>
<View>
<Header headerText='Tech Stack' />
<LibraryList />
</View>
</Provider>
);
};
export default App;
LibraryReducer.js
import data from './LibraryList.json';
export default () => data;
index.js inside reducers folder
import { combineReducers } from 'redux';
import LibraryReducer from './LibraryReducer';
export default combineReducers({
libraries: LibraryReducer
});
LibraryList.json
[
{"id": 0,
"title": "Webpack",
"description": "Webpack is a module bundler. It packs CommonJs/AMD modules i. e. for the browser. Allows to split your codebase into multiple bundles, which can be loaded on demand."
},
....
]
Expected result: console.log(this.props) runs once and return libraries
Actual result: It runs twice
I had a similar problem with one of my projects.
In LibraryList.js instead of extending Component use PureComponent. PureComponents won't call the render function if the state and the props have not changed, since it integrates a simple check in the shouldComponentUpdate method. https://reactjs.org/docs/react-api.html#reactpurecomponent
You could always implements your own shouldComponentUpdate method with a React Component instead of using the PureComponent. You'll need to be careful when implement the shouldComponentUpdate method with Redux, you may create more bugs. https://redux.js.org/faq/react-redux#why-isn-t-my-component-re-rendering-or-my-mapstatetoprops-running
When I tried your example on Android and iOS, I wasn't able to replicate your issue, it only returned once.
Trying to address all h1 elements in a child component but the class styling bubbles up to address all h1 elements in entire DOM. How restrict styling to component to which stylesheet is imported?
```
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1>Principles in Areas of Life</h1>;
}
}
```
& Beginning of parent component code:
```
import React, { Component } from "react";
import AoLDescription from "./aoLDescription";
import MetaPrinciple from "./metaPrinciple";
import "../styles/principles.css";
import PrinciplesInAol from "./principlesInAoL";
export default class Principles extends Component {
render() {
```
Thanks for the help.
Any css you add that defines styles by a tagname will apply to every element in the dom with that tagname, so in your case, adding a class name to the <h1/> is probably the best option.
In the PrinciplesInAoL component
import React, { Component } from "react";
import "../styles/principlesInAoL.css";
export default class PrinciplesInAoL extends Component {
render() {
return <h1 className="principlesInAoL-h1">Principles in Areas of Life</h1>;
}
}
and in principlesInAoL.css, add a definition for that class:
.principlesInAoL-h1{
/* your styles here */
}
ReactJS has no view encapsulation (in contrast to Angular). So in order to make CSS rule much stricter you should use CSS selector with higher specificity.
So I started to integrate the react dnd library into my application, and the first thing I tried to do is add the DragDropContext with the Html5 backend.
When I add the attribute to the class I get this error:
Uncaught Error: Expected the backend to be a function or an ES6 module
exporting a default function.
import React from 'react';
import Link from 'react-router-dom';
import { connect } from 'react-redux';
import { DragDropContext } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';
import PropTypes from 'prop-types';
#DragDropContext(HTML5Backend)
class UserHowView extends React.Component {
...
..
}
const mapStateToProps = state => ({
...
});
export default connect(mapStateToProps)(userShowView);
What am I doing wrong so far?
One of the examples for the library has this:
#DragDropContext(HTML5Backend)
export default class Container extends Component {
But my definition and export are separate.
This library has a breaking change since v11.0.0 breaking changes:
from
import HTML5Backend from 'react-dnd-html5-backend
to
import { HTML5Backend } from 'react-dnd-html5-backend
If you are still encountering the issue, please check this issue in repo
and make sure you're not including DragDropContext in your render function
Remove the braces from the HTML5Backend import statement. Replace with the following:
import HTML5Backend from 'react-dnd-html5-backend';
This has resolved the issue for me.