React核心知识点
介绍
react是最近很是流行的框架，相对于vue框架，对js、es6以及以上的版本的语法要求会更高。核心是把设计好的UI划分成组件层级。
JSX的使用
js是JavaScript的语法扩展。在编译的时候JSX表达式会被转为不同js对象，所以把jsx表达式嵌入if语句或者for 也都是没有问题的.
# 基本表达式
const element = <h1>Hello World!</h1>
# 嵌入函数中，编译成为函数组件
function geGretting(){
return <h1>Hello Gretting </h1>;
}
# JSX使用特定属性
const element = <img src={img.url} />
# jsx 表示对象
const el = (
<h1 className = "greeting">
Hello World!
</h1>
)
React.createElement(
'h1',
{classNmae:'greeting'},
'Hello World!'
)
函数组件和class组件
# 函数组件
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("最终获取到从子组件传进的参数")
}
render(){
return(
<Child handleParent={this.onHandle}></Child>;
)
}
}
Hook特性
Hook是react新增的一个属性，在不编写class组件的时候使用其他React的特性。
- 特性一：count属性相当于 this.state.count
function Example(){
const [count,setCount] = useState(0) //初始化count为0
return (
<div >{count}</div>
<button onClick ={()=>{setCount(count+1)}} ></button>
)
}
#等价与如下
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>
)
}
}
注意点：
- props的内容不可更改
- 组件名首字母大写
- 在return的内容最外层必须要有一个div大标签，或者用 <React.Fragment></React.Fragment>包括在最外层
