render():
render()方法是class组件中唯一必须实现的方法
当render被调用时,他会检查 this.props 和 this.state 的变化,并返回以下类型之一:
· React元素。通常通过JSX创建。例如,<div />会被React渲染为DOM节点,<MyComponent />会被React渲染为自定义组件,无论是<div />还是<MyComponent />均为React元素。
· 数组或fragments。 使得 render 方法可以返回多个元素。
Fragments: React中的一个常见模式是一个组件返回多个元素。Fragments 允许你将子列表分组,而无需向 DOM 添加额外节点.
· Portals。 可以渲染子节点到不同的DOM子树中。
· 字符串或数值类型。 它们在DOM中会被渲染为文本节点
· 布尔类型或null。 什么都不渲染。
render()函数应该为纯函数,意味着在不修改组件state的情况下,每次调用都返回相同的结果,并且它不会直接与浏览器交互。
如需与浏览器进行交互,请在 componentDidMount() 或其他生命周期方法中执行你的操作。保持 render()
为纯函数,可以使组件更容易思考。
constructor():
constructor(props)
如果不初始化state或不进行方法绑定,则不需要为React组件实现构造函数
在React组件挂在之前,会调用它的构造函数。在为React.Component子类实现构造函数时,应在其他语句之前调用super(props)。否则,this.props在构造函数中可能会出现未定义的bug。
在 React 中,构造函数通常仅用于以下两种情况:
· 通过给 this.state 赋值对象来初始化内部state
· 为事件处理函数绑定实例
在构造函数中为 this.state
赋值初始 state;其他方法中赋值,应使用 this.setState()
替代
constructor(props) {
super(props);
this.state = { textValue: 1 }
}
render() {
const a1 = 2
this.setState = { textValue: a1 }
}