React核心知識(shí)點(diǎn)
介紹
react是最近很是流行的框架良蛮，相對(duì)于vue框架融蹂，對(duì)js、es6以及以上的版本的語(yǔ)法要求會(huì)更高乍狐。核心是把設(shè)計(jì)好的UI劃分成組件層級(jí)赠摇。
JSX的使用
js是JavaScript的語(yǔ)法擴(kuò)展。在編譯的時(shí)候JSX表達(dá)式會(huì)被轉(zhuǎn)為不同js對(duì)象，所以把jsx表達(dá)式嵌入if語(yǔ)句或者for 也都是沒(méi)有問(wèn)題的.
# 基本表達(dá)式
const element = <h1>Hello World!</h1>
# 嵌入函數(shù)中藕帜，編譯成為函數(shù)組件
function geGretting(){
return <h1>Hello Gretting </h1>;
}
# JSX使用特定屬性
const element = <img src={img.url} />
# jsx 表示對(duì)象
const el = (
<h1 className = "greeting">
Hello World!
</h1>
)
React.createElement(
'h1',
{classNmae:'greeting'},
'Hello World!'
)
函數(shù)組件和class組件
# 函數(shù)組件
function Welcome (){
return <h1>Hello World!</h1>
}
# class組件
class Welcome extends React.Component{
render(){
return (
<h1>Hello World</h1>
);
}
}
父子組件之間通信
父組件向子組件傳值
function Child(props){
return <div>{props.name}</div>
}
class Parent extends React.Component{
render(){
return(
<Child name="www1"></Child>;
<Child name="www2"></Child>;
)
}
}
子組件向父組件傳值
class Child extends React.Component{
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this); //重要操作
}
function handleChange(e){
this.props.handleParent(e.target.value)
}
render(){
return (
<input onChange={this.handleChange} ></input>
)
}
}
class Parent extends React.Component{
constructor(props) {
super(props);
this.onHandle = this.onHandle.bind(this); //重要操作
}
function onHandle(value){
console.log("最終獲取到從子組件傳進(jìn)的參數(shù)")
}
render(){
return(
<Child handleParent={this.onHandle}></Child>;
)
}
}
Hook特性
Hook是react新增的一個(gè)屬性烫罩，在不編寫(xiě)class組件的時(shí)候使用其他React的特性。
- 特性一：count屬性相當(dāng)于 this.state.count
function Example(){
const [count,setCount] = useState(0) //初始化count為0
return (
<div >{count}</div>
<button onClick ={()=>{setCount(count+1)}} ></button>
)
}
#等價(jià)與如下
class Example extends React.Component{
constructor(props){
super(props);
state={ count:0};
}
render(){
return (
<div >{count}</div>
<button onClick ={()=>{this.setState({count:count+1)}) } ></button>
)
}
}
注意點(diǎn)：
- props的內(nèi)容不可更改
- 組件名首字母大寫(xiě)
- 在return的內(nèi)容最外層必須要有一個(gè)div大標(biāo)簽洽故，或者用 <React.Fragment></React.Fragment>包括在最外層
