react知识体系
概念介绍 （历史）
React是构建用户界面的javaScript的库，主要用于构建ui界面 ，2013年开源（facebook）instagram(照片交互)
特点
-
声明式的设计
-
高效（采用虚拟Dom来实现Dom的渲染，最大限度的减少Dom的操作）
-
灵活（可以跟其他的库灵活搭配使用）
-
JSX（在JS里写html），javascript的拓展
-
组件化 ，模块化开发 代码复用很方便
-
单向的数据流，没有实现数据的双向绑定 （数据—视图—事件—数据）
-
js BOm 对象 window窗口对象 加载html document location history navigator screen
创建项目
引入链接 使用创建工具app
这种方式仅用于学习使用调试
通过React脚手架创建项目 进行开发 部署
#安装脚手架 Create React App
cnpm intall -g create-react-app
#创建项目
create-react-app 项目名称JSX元素渲染
//JSX语法
app ,root);
渲染函数
//ReactDOM.render(组件对象,渲染到的地方);
(property) JSX.IntrinsicElements.h1: React.DetailedHTMLProps, HTMLHeadingElement>
let h1 = HelloWorld
; //这就是JSX的语法，认为h1就是一个JSX对象 不需要引号的
HelloWorld
这是副标题 //报错 因为有两个节点 必须只有一个根节点
HelloWorld这是副标题
//这样是可以的 只有一个根h1 react的样式和注释 （style）
let exampleStyle= {
background:"skyblue",
borderBottom:"1px solid red"
}
//样式全部都会放在{}这里
let Element = (
HelloWorld
//在jsx中style="height:200px"不允许这样写
)
ReactDOM.render(Element,document.querySelector('#root'))
JSX注释 {/* 这里写注释 */}
let Element1 = (
{/* 这里写注释 */}
HelloWorld
)
#注释{/* 这里写注释 */} react组件
函数式组件（静态组件）
// 函数式组件| 首字母大写
function Child() {
let title = 我是副标题
let weather = '下雨'
let isGo = weather==='下雨'? '不出门':'出门'
//返回一个jsx对象
return (
Hello World
{title}
是否出门？
{isGo}
)
}
//使用函数式组件
ReactDOM.render(
类组件（动态组件）
// 定义类组件
class HelloWorld extends React.Component{
//类组件用render就可以啦
render(){
return (
Hello
)
}
}
// 使用类组件
ReactDOM.render(
Hello
react父子组件通信
父传子
//在父元素中使用state去控制子元素props从而达到父元素数据传递给子元素
class ParentCom extends React.Component{
constructor(props){
super(props)
this.state = {
isActive:true
}
this.change = this.change.bind(this)
}
change(){
//点击事件改变状态
this.setState({
isActive: !this.state.isActive
})
}
render(){
return (
//父组件传递给子组件
)
}
}
class ChildCom extends React.Component{
constructor(props){
super(props)
}
//子组件接受参数进行判断是否显示
render(){
let strClass = null
if(this.props.isActive){
return (
strClass =' active'
)
}else{
strClass = ""
}
return (
我是子元素
)
}
}
ReactDOM.render(
子传父
//子组件传父组件
class ParentCom extends React.Component{
constructor(props){
super(props)
this.state = {
childData:""
}
}
render(){
return (
子元素传递给父元素的数据{this.state.childData}
{/* 数据传递过来给给this.setChildData，让子组件可以修改父组件数据 */}
)
}
//设置子组件传过来的数据 可以修改父组件数据
setChildData=(data)=>{
this.setState({
childData:data
})
}
}
class Child extends React.Component{
constructor(props){
super(props)
this.state ={
msg : "Hello"
}
}
render(){
return (
)
}
sendData=()=>{
alert(this.state.msg)
}
// 可以定义箭头函数（访问地址就是当前this） 不用绑定
}
ReactDOM.render(
react生命周期
组件在创建 使用 乃至销毁的整个声明过程周期
在声明周期中我们有许多调用时间 俗称钩子函数（事件 方法）
声明周期的三个状态 ：
Mounting：将组件插入到DOM中
Updateing： 将数据更新到DOM中
Unmounting:将组件移除DOM中
钩子函数：所有7个
CompontWillMount：组件将要渲染
CompontDidMount：组件渲染完毕
CompontWillReceiveProps:组件将要接受props数据
ShouldComponentUpdate:在组件接受新的state或者props，判断是否更新，返回boolean值
CompontWillUpDate:组件将要更新
CompontDidUpdate:组件更新完毕
CompoentWillUnmount:组件将要卸载
将要渲染—渲染完毕–将要接受参数—接受参数是否更新—将要更新—-更新完毕—将要卸载
class ComLife extends Component{
constructor(props){
super(props)
this.state = {
msg:'HelloWorld'
}
console.log("constructor构造函数")
}
componentWillMount(){
console.log("组件将要渲染")
}
componentDidMount(){
console.log("componentDidMount组件渲染完毕")
}
componentWillReceiveProps(){
console.log("componentWillReceiveProps组件将要接受新的数据")
}
componentWillUpdate(){
console.log("componentWillUpdate组件将要更新")
}
componentDidUpdate(){
console.log("componentDidUpdate组件更新完毕")
}
componentWillUnmount(){
console.log("componentWillUnmount组件将要卸载")
}
render(){
console.log("render渲染函数")
return(
{this.state.msg}
)
}
onChangeMsg=()=>{
this.setState({
msg:"Hello 老陈"
})
}
}
ReactDOM.render(
react-Ant-UI
Ant 蚂蚁框架
ant-design