Question

我有以下脚本。我正在使用create-react-native-app在PC上运行。控制台给了我以下警告。如果有的话，我不知道该怎么办。

以下是警告：

Warning: componentWillReceiveProps is deprecated and will be removed in the 
next major version. Use static getDerivedStateFromProps instead.

Please update the following components: TouchableOpacity

Learn more about this warning here:
hxxxx/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer- 
dev.js:5706:19 in printWarning
- ... 19 more stack frames from framework internals
19:26:44: Warning: componentWillMount is deprecated and will be removed in 
the next major version. Use componentDidMount instead. As a temporary 
workaround, you can rename to UNSAFE_componentWillMount.

Please update the following components: TouchableOpacity

Learn more about this warning here:
hxxx/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer- 
dev.js:5706:19 in printWarning
- ... 19 more stack frames from framework internals
19:26:46: Warning: componentWillReceiveProps is deprecated and will be 
removed in the next major version. Use static getDerivedStateFromProps 
instead.

Please update the following components: Text, TextInput, View

Learn more about this warning here:
hxxx/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer- 
dev.js:5706:19 in printWarning
- ... 21 more stack frames from framework internals
19:26:48: Warning: componentWillMount is deprecated and will be removed in 
the next major version. Use componentDidMount instead. As a temporary 
workaround, you can rename to UNSAFE_componentWillMount.

Please update the following components: TouchableHighlight

Learn more about this warning here:
hxxx/fb.me/react-async-component-lifecycle-hooks
- node_modules\react-native\Libraries\ReactNative\YellowBox.js:82:15 in warn
- node_modules\react-native\Libraries\Renderer\ReactNativeRenderer- 
dev.js:5706:19 in printWarning
- ... 23 more stack frames from framework internals

我在代码中遇到以下两个问题：

每次更改输入字段时，应用都会呈现。我需要抑制渲染，直到调用onSubmitEditing
当代码运行时，我的IOS设备会收到黄色警告;

警告：不推荐使用componentWillMount ...

import React from 'react';
import { TextInput,Button, StyleSheet, View,Text, ScrollView } from 'react-native';
import {Constants} from 'expo'

  let id=0
  const Todo = (props) => (
    <Text>
      {/* <input type='checkbox'
              checked={props.todo.checked}
              onClick={props.onToggle}
        /> */}
       <Button title='delete' button onPress={props.onDelete}></Button>
       <Text>{props.todo.text}</Text>
    </Text>
  )
  export default class App extends React.Component {
    constructor(){
      super()
      this.state={
        todos:[],
        inputText:''
      }
    }

  clearText(){
    this.setState({inputText:''})

  }



  addTodo(text){
    console.log(text)

    this.setState({todos: [...this.state.todos,
                              { id:id++,
                                text: text,
                                checked:false
                              }
                          ]
                  })

    this.setState({inputText:text})



  }
  toggle(id){
    this.setState({todos: this.state.todos.map(todo=>{
                          if(id!==todo.id)return todo
                          return{
                              id:todo.id,
                              text:todo.text,
                              checked: !todo.checked}})})
  }
  removeTodo(id){
    this.setState({todos: this.state.todos.filter(todo=>(todo.id!==id))})
  }

  render(){
     console.log(this.state)
     return(

       <View style={styles.container}>
          <Text >Count of Todos: &nbsp;{this.state.todos.length}</Text>
          <Text >{"Todo's checked:"}&nbsp;
               {this.state.todos.filter(todo =>(todo.checked===true)).length}</Text>
          <TextInput
                 style={{height:25,borderColor:'red',borderWidth:1,textAlign:'center'}}
                 value={this.state.inputText}
                  placeholder={'add Todo'}
                  onSubmitEditing={()=>{this.clearText()}}
                  onChangeText={(text) => {this.addTodo(text)}}
                  />

          <ScrollView>
           {this.state.todos.map(todo=>(
                 <Todo
                    onToggle={()=>(this.toggle(todo.id))}
                    onDelete={()=>(this.removeTodo(todo.id))}
                    todo={todo}
                    key={todo.id}
                 />))}
          </ScrollView>
       </View>
     )
    }
  }
const styles = StyleSheet.create({
  container:{
    flex:1,
    flexDirection:'column',
    height:50,

    paddingTop:3*Constants.statusBarHeight,

  }
})

Answer 1

定义为函数的纯组件将始终重新渲染。

将组件转换为类，并阻止shouldComponentUpdate()中的重新呈现返回false。

签名是shouldComponentUpdate（nextProps，nextState）。说你没有重新渲染是因为组件的参数没有改变：

shouldComponentUpdate(nextProps, nextState){
   return !equals(nextProps, this.props);
}

我认为这个例子可以帮助您，因为它可以通过示例得到很好的解释：https://reactjs.org/docs/faq-functions.html

毕竟它是关于创建一个带有方法的类，并且通常用OOP语言调用它。

希望它可以帮到你

如何防止渲染更改

1 个答案: