React学习第一天
搭建react脚手架
npx create-react-app "project（你的项目名称）"
jsx基础语法
这种类似于html的语法在react中被称为JSX，是JavaScript的一种语法拓展
使用jsx描述页面，有一些语法规则
- 根元素只有一个
- JSX中使用JavaScript表达式，表达式写在花括号中
- 属性值指定为字符串字面量，或者在属性值中插入一个JavaScript表达式
- style对应样式对象，class要写作clssName
- 注释续写在花括号
- JSX允许在模板中插入数组，数组会自动展开所有成员
// 在react中，使用jsx描述页面，例如
function App(){const el = <div>hello react</div>return el
}
// 当然将类似于html的元素单独提取出来例如
function App(){const el = <div>hello react</div>return el
}
createElement方法
JSX是一个JavaScript扩展语法，Babel会将JSX转为React.createElement函数调用
React.createElement(type,[props],[...children])
// 参数说明type:创建react元素类型props（可选）：react元素的属性children（可选）：react的子元素
例如
const element1 = (<h1 className="greeting">hello word</h1>
)
const element2 = React.creatElement("h1",{className: "greeting"},"hello word")
组件与事件的绑定
- react中的组件
函数式组件
function 组件名(){return (<div>hello React</div>)
}
类组件
class App extends React.Component{render(){return (<div>hello React</div>)}
}
- 为元素绑定事件
在react中，绑定事件写法如下
<button onClick={handleClick}>按钮</button>
在react中，传递事件对象，是一个合成对象
React也提供了相应访问原生对象的方式
例如
function App(){/*** @params:传递的参数*/function handleToBaidu(params,e){e.preventDefault()return false//return fasle在原生可以进行事件默认阻止行为，但react必须用事件对象e}return (<a href="https://www.baidu.com" onClick={(e)=>handleToBaidu('传递的参数'，e)}>前往百度</a>)
}原生事件
console.log(e.nativeEvent)
组件状态与数据传递
- 把所有的state都当作异步
- 永远不要信任state调用后的状态（最好打印一下）
- 如果要使用改变之后的状态，可以使用回调函数（第二个参数）
- 如果新的状态要根据上一个的状态运算，使用函数的方式改变状态
<!--类组件中-->
this.setState({// 设置值
})
<!--函数式组件-->
const [num,setNum] = useState(num)
function handleClick (){setNum(2)
}例如handleClick = ()=>{// this.state.num++ //不能通过这种方式setState可能是异步的，所以想拿到state执行后的结果，可以通过提前使用一个变量存储，或者使用第二个参数，他是一个函数，在state更新后调用this.setState({num:this.state.num+1})}render(){return (<><div>{this.state.num}</div><button onClick={this.handleClick}>修改</button></>)}
props，父组件向子组件传递
函数组件
// 子组件
function Hello(props){return (<div>{props.content}</div>)
}
export default Hello
// 父组件
function App(){return (<Hello content="你好"></Hello>)
}
子组件向父组件传递
// 子组件向父组件传递
function Hello(props){function handleClick(){props.handleClickParent("我很好")}return (<div onClick={handleClick}>{props.content}</div>)
}
export default Hello// 父组件
function App(){function handleClickParent(VAL){console.log('VAL',Val)}return (<Hello content="你好" handleClickParent={handleClickParent}></Hello>)
}