你可以根据需要选择性使用react,局部添加交互性，
Next.js 是一个流行的、轻量级的框架，用于配合 React 打造静态化和服务端渲染应用。它包括开箱即用的样式和路由方案，并且假定你使用 Node.js 作为服务器环境
Nextjs流行的，轻量级的框架，静态化服务端渲染应用，
组件允许你将ui拆分成独立的可复用的代码片段，并对每个片段进行独立的构思
唯一的带有数据的props代表属性对象并返回一个react元素，这类组件被成为函数组件，
我们从组件自身的角度命名props,而不是依赖调用组件的上下文命名
var没有快级作用域，let有快级作用域
第一优先使用的是const,如果希望变量被改变就使用let,至于var最好不要在代码当中出现
事件对象 * - React事件中同样会传递事件对象，可以在响应函数中定义参数来接收事件对象 * - React中的事件对象同样不是原生的事件对象，是经过React包装后的事件对象 * - 由于对象进行过包装，所以使用过程中我们无需再去考虑兼容性问题
event.preventDefault取消默认行为
const LogItem = (props) => {
// 在函数组件中，属性就相当于是函数的参数，可以通过参数来访问
// 可以在函数组件的形参中定义一个props，props指向的是一个对象
// 它包含了父组件中传递的所有参数
// console.log(props);
return (
<div className="item">
<MyDate/>
{/* 日志内容的容器 */}
<div className="content">
{/*
如果将组件中的数据全部写死，将会导致组件无法动态设置，不具有使用价值
我们希望组件数据可以由外部设置，在组件间，父组件可以通过props（属性）向子组件传递数据
*/}
<h2 className="desc">{props.desc}</h2>
<div className="time">{props.time}分钟</div>
</div>
</div>
);
};
在函数组件的形参当中定义了一个props,props指向一个对象，包含了父组件当中传递的所有的参数
属性相当于函数的参数，可以通过参数来访问
可以在函数组件的形参当中定义一个props指向的是一个对象，父组件当中传递了所有的参数
如果将组件当中数据全部写死，将会导致组件无法动态设置，不具有使用假值
toLocaleString('zh-CN');
propps是只读的不能修改的
在react当中，当组件渲染完毕以后，再次修改组件当中的变量，不会让组件重新渲染，要使得组件可以收到变量的影响，必须在变量修改以后堆组件进行重新渲染
state和props都哦是一种存储属性的一种方式
state相当于一个变量，只是这个变量在react当中进行了注册，react会监控变量的变化，当state发生变化的时候会自动触发页面面的变化
setState会触发组件的重新渲染，异步的，setState去修改一个state，并不表示修改当前的state他修改的是组件的下一次渲染的时候state的值
获取原生的dom对象
1.可以使用传统的document来堆dom进行操作
2.直接从react处获取dom对象
步骤：
1.创建一个存储dom对象的容器
获取原生的DOM对象
* 1.可以使用传统的document来对DOM进行操作
* 2.直接从React处获取DOM对象
* 步骤：
* 1.创建一个存储DOM对象的容器
* - 使用 useRef() 钩子函数
* 钩子函数的注意事项：
* ① React中的钩子函数只能用于函数组件或自定义钩子
* ② 钩子函数只能直接在函数组件中调用
* 2.将容器设置为想要获取DOM对象元素的ref属性
* <h1 ref={xxx}>....</h1>
* - React会自动将当前元素的DOM对象，设置为容器current属性
*
* useRef()
* - 返回的就是一个普通的JS对象
* - {current:undefined}
* - 所以我们直接创建一个js对象，也可以代替useRef()
* - 区别：
* 我们创建的对象，组件每次重新渲染都会创建一个新对象
* useRef()创建的对象，可以确保每次渲染获取到的都是同一个对象
*
* - 当你需要一个对象不会因为组件的重新渲染而改变时，就可以使用useRef()
*
* */
const h1Ref = useRef(); // 创建一个容器
const [count, setCount] = useState(1);
// const h1Ref = {current:null};
// console.log(temp === h1Ref);
// temp = h1Ref;
const clickHandler = () => {
// 通过id获取h1
const header = document.getElementById('header');
// alert(header);
// header.innerHTML = '哈哈';
console.log(h1Ref);
// alert(h1Ref.current === header);
h1Ref.current.innerText = '嘻嘻！';
};
const countAddHandler = ()=>{
setCount(prevState => prevState + 1);
};
return <div className={'app'}>
<h1 id="header" ref={h1Ref}>我是标题{count}</h1>
<button onClick={clickHandler}>1</button>
<button onClick={countAddHandler}>2</button>
</div>;
};
// 导出App
获取原生的dom对象 1.可以使用传统的document来地dom进行操作 2.之际从ract获取dom对象
useRef返回的是一个普通的js对象current:undefined 直接创建一个js对象，也可以代替useRf 我们创建你的对下个，组件每次重新渲染都会创建一个新的对象 useRef创建的对象，可以确保每次渲染获取到的都是同一个对象
useeRef
返回的是一个普通的js对象current:undefined 类组件的props是存储在类的实例对象当中的，可以直接通过实例兑现那个房屋内this.props 类组件当中的state统一存储到了实例对象那个当中的state属性当中，可以通过this.state来访问， 通过this.setStatela来进行修改，当我们通过this.setState修改state的时候react只会修改设置了的属性 函数组件当中响应式函数直接以函数的形式定义在组件当中的，但是在类组件当中响应函数是以类的方法来定义的，之前的属性都会保留，
/*
* 类组件的props是存储到类的实例对象中，
* 可以直接通过实例对象访问
* this.props
* 类组件中state统一存储到了实例对象的state属性中
* 可以通过 this.state来访问
* 通过this.setState()对其进行修改
* 当我们通过this.setState()修改state时，
* React只会修改设置了的属性
*
* 函数组件中，响应函数直接以函数的形式定义在组件中，
* 但是在类组件中，响应函数是以类的方法来定义，之前的属性都会保留
* 但是这你仅限于直接存储于state中的属性
*
* 获取DOM对象
* 1.创建一个属性，用来存储DOM对象
* divRef = React.createRef();
* 2.将这个属性设置为指定元素的ref值
* */
// 创建属性存储DOM对象
divRef = React.createRef();
// 向state中添加属性
state = {
count: 0,
test: '哈哈',
obj: {name: '孙悟空', age: 18}
};
// 为了省事，在类组件中响应函数都应该以箭头函数的形式定义
clickHandler = () => {
// this.setState({count: 10});
// this.setState(prevState => {
// return {
// count: prevState + 1
// }
// });
/*this.setState({
obj:{...this.state.obj, name:'沙和尚'}
});*/
console.log(this.divRef);
};
render() {
// console.log(this.props);
// console.log(this.divRef);
return (
<div ref={this.divRef}>
<h1>{this.state.count} --- {this.state.test}</h1>
<h2>{this.state.obj.name} --- {this.state.obj.age}</h2>
<button onClick={this.clickHandler}>点</button>
<ul>
<li>姓名：{this.props.name}</li>
<li>年龄：{this.props.age}</li>
<li>性别：{this.props.gender}</li>
</ul>
</div>
);
}
}
类组件的pros是存储到类的实例对象当中，可以直接通过实力对象访问,this.props,
类组件当中的state统一存储到了实力对象的state属性当中，可以通过this.state来访问，通过this.setState对齐进行修改，当我们通过this.setState修改state的时候react只会修改设置了属性
函数组件当中，响应函数直接以函数的形式定义在组件当中，但是在类组件当中，响应函数是按照类的方法来定义的，之前的属性都会保留，但是这仅限于直接存储于state当中的属性，
获取dom的对象：
1.创建一个属性，用来存储dom对象
2.将这个属性设置为指定元素的ref的值
