Question

在我的代码中，我没有使用constructor ()。我一直看到人们在类组件中使用构造函数，但是即使我没有在代码中使用构造函数，它也能正常工作。在我的代码中，将状态放在构造函数之外，是个好主意还是将构造函数与内部设置的状态一起使用会更好？将来是否会产生某种错误，或者使系统性能变差？在这种情况下，更建议做什么？

import React, { Component, Fragment } from 'react'
import  {Redirect} from 'react-router-dom'
import { connect } from 'react-redux'

import ActionCreator from '../redux/actionCreators'

import Button from '../elements/Button'

const statsgenre = {
'Ação': 'Action',
'Comédia': 'Comedy',
'Drama': 'Drama'
} 


const statsuser = {
'Assistido' : 'Watched',
'Assistindo': 'Watching',
'Assistir': 'Watch' 
}


class ScreensEditSeries extends Component{

state = {
    id: '',
    name: '',
    status: '',
    genre: '',
    notes: ''
}

componentDidMount = () => {    
    const serie  = {...this.props.match.params}
    this.props.load(serie)
    this.props.reset()
}

static getDerivedStateFromProps(newProps, prevState){
    let serie = {}
    if (prevState.name === '' || prevState.name === undefined){  
        if (newProps.series.serie.name !== prevState.name){
            serie.name = newProps.series.serie.name
        }

        if (newProps.series.serie.genre !== prevState.genre){
            serie.genre = newProps.series.serie.genre
        }

        if (newProps.series.serie.status !== prevState.status){
            serie.status = newProps.series.serie.status
        }
        if (newProps.series.serie.notes !== prevState.notes){
            serie.notes = newProps.series.serie.notes
        }
        return serie
    }           
}

saveSeries = () => {
    const {name, status, genre, notes} = this.state
    const id = this.props.match.params.id
    const newSerie = {
        id,
        name,
        status,
        genre,
        notes
    }
    this.props.save(newSerie)
}

handleChange = field => event => {
    this.setState({[field] : event.target.value})
}

render(){
    return (
        <Fragment>
            <div className="container">         
                <div>  
                    {this.props.series.saved  && <Redirect to={`/series/${this.props.match.params.genre}`}/>}
                    <h1 className='text-white'>Edit Série</h1>
                    {!this.props.series.isLoadding && <Button>
                        Name: <input type="text" value={this.state.name} onChange={this.handleChange('name')} className="form-control" /><br />
                        Status: {<span>&nbsp;</span>} 
                        <select value={this.state.status} onChange={this.handleChange('status')}>
                            {Object.keys(statsuser)
                                .map( key => <option key={key}>{statsuser[key]}</option>)}
                        </select><br/><br/>
                        Genre: {<span>&nbsp;</span>} 
                        <select value={this.state.genre} onChange={this.handleChange('genre')}>
                            {Object.keys(statsgenre)
                                .map(key => <option key={key}>{statsgenre[key]}</option>)}
                        </select><br/><br/>
                        Notes: <textarea type='text' value={this.state.notes} onChange={this.handleChange('notes')} className="form-control"></textarea><br />
                        <button className="button button2" type="button" onClick={this.saveSeries}>Save</button>
                    </Button>}
                    {this.props.series.isLoadding && <p className='text-info'>Loading...</p>}
                </div>
            </div>
        </Fragment>
    )
}
}

const mapStateToProps = state => {
return {
    series: state.series
}
}

const mapDispatchToProps = dispatch => {
return {
    load : serie => dispatch(ActionCreator.getSerieRequest(serie)),
    save: newSerie => dispatch(ActionCreator.updateSerieRequest(newSerie)),
    reset : () => dispatch(ActionCreator.seriesReset()),
}

}

export default connect(mapStateToProps, mapDispatchToProps)(ScreensEditSeries)

Answer 1

在没有构造函数的情况下使用类组件没有问题。通常，在组件实例化后，需要做一些准备状态，处理一些道具或其他设置一些实例变量的工作时，会用到它。

没关系：）

在这里，丹·阿布拉莫夫（Dan Abramov）的一则非常有趣的帖子谈到，如果需要使用构造函数，为什么需要调用super(props)：

https://overreacted.io/why-do-we-write-super-props/

与问题无关，但询问构造函数，我认为这可能对您有用。

Answer 2

没有区别。您看到大多数人在constructor内执行此操作的原因是，直接在类上执行state = {}是尚未被广泛采用的新语法（它通常仍需要Babel或类似的转换）。有关更多信息，请参见proposal-class-fields。需要注意的一件事是，如果您需要访问任何道具以初始化状态，则必须在constructor中进行。

Answer 3

通常，只有在首次创建类时需要逻辑，或者设置取决于传入的道具时，才应使用构造函数。由于初始状态下的所有内容都是硬编码的，因此不使用构造函数就可以了情况。

不要使用构造函数

3 个答案: