React组件:可以分为类组件和函数式组件
1、函数式组件中没有state
2、函数式组件中没有生命周期(重点,涉及到生命周期的方法只能在类组建中定义)
可以借助react提供的hooks在函数式组建中做状态和方法
react对象有个useState函数,可以通过该函数创建状态,并且该函数是有返回值的:
const [count,setCount] = useState(0);
console.log(useState(0)) //[0, ƒ]
得到两个值count和setCount,分别为创建的state和操作state的方法,
名称是根据我们自己的需求命名的,由于该方法返回的是数组,因此我们直接用数组解构
的方式来接收返回值即可
**注意:**使用setCount方法的时候,该方法会将count的值直接修改为传入的实参的值。
export default () => {
let [count, setCount] = useState(1) //state部分
const add = (arg) => { setCount(arg) } //操作状态的方法 }函数组建的三个组成结构
return (<div> //return结构
<p>{count}</p>
<button onClick={() => add(count + 1)}>+</button>
</div>)
}
//每次点击button,setCount都会设置count的值为当前值加1;
函数组建的构成一般也是结构,分为三个部分:
1、state部分;2、操作状态的方法;3、return结构(如上面代码注释所示)
无论一个函数组件多么复杂都应该遵循这个解构来创建。
函数组建中使用props:
使用方式类似类组件的props使用,父级组件需要暴露接口给子组件,子组件才能接收,子组件接收数据的方法:直接作为函数的参数(props)传给子组件。
//父级组件传过去
export default () => {
let [count, setCount] = useState(1)
const add = (count) => { setCount(count) }
return (<div>
//类似类组件中的接口传递数据到子组件
<Title count={count} />
<button onClick={() => add(count + 1)}>+</button>
</div>)
}
//子组件接收
export default (props) => {
return (
<h1>{props.count}</h1>
)
}
然后实现button点击实现state中的count值的改变,这个只需要封装好increase和decrease方法,然后通过接口传递给Ibutton组件即可:
export default () => {
let [count, setCount] = useState(1)
const changeState = (count) => { setCount(count) }
return (<div>
<Title count={count} />
<Ibutton onClick={() => changeState(count + 1)} name="+" />
<Ibutton onClick={() => changeState(count - 1)} name="-" />
</div>)
}
//Ibutton组件代码
export default (props) => {
return <button onClick={props.onClick}>{props.name}</button>
}
这样子就简单的完成了用函数式组件实现state值得改变。